How to install Summernote WYSIWYG with Bootstrap 4

3853 Views
9

Demo Online

1 year ago
Zaid Bin Khalid
3853 Views
9

Summernote is a lightweight JQuery Plugin for Bootstrap 3,4. I am going to tell you how to install Summernote a JQuery Plugin into your bootstrap 4 themes.

You just need to add Summernote JQuery and CSS into a <head> tag.

Remember Summernote is a JQuery Plugin plugin so it is dependent on JQuery. And it is designed for bootstrap so you need to add bootstrap too.

Step 1

Create a folder with a name test-summernote-bs4 in this folder create a file index.html.
Open index.html file and copy below code.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
    <title>Validate Emails and send using PHPMailer and JQuery Ajax</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
    <link href="https://cdn.jsdelivr.net/npm/summernote@0.8.11/dist/summernote-bs4.min.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
	<script src='https://www.google.com/recaptcha/api.js'></script>
</head>

<body>
    <div class="container">
        <div class="col-sm-12"> 
            <div id="emailMsg"></div>
            <form id="emailFrom" method="post" onsubmit="return false;">
                <input type="hidden" name="sendEmail" value="ok" />
                <div class="form-group">
                    <label>To:</label>
                    <input type="text" name="to" id="to" class="form-control-lg form-control" placeholder="More than one email, Please seperate with comma (,)" />
                    <div class="text-danger"><small>* More than one email, Please seperate with comma (,)'</small></div>
                </div>
                <div class="form-group">
                    <label for="staticEmail">Subject:</label>
                    <input class="form-control form-control-lg" id="subject" name="subject" placeholder="Enter your subject" type="text">
                </div>
                <div class="form-group">
                    <textarea name="mailEditor" id="txtEditor"></textarea>
                </div>
                <div class="form-group">
                    <div class="g-recaptcha" data-sitekey="6LeXKIkUAAAAAJrVaP2rbXY7r8uWLr13YX3X_c3r"></div>
                </div>
                <div class="form-group">
                    <button type="submit" name="submit" class="btn btn-primary">Send Email</button>
                </div>
            </form>
        </div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bs4-summernote@0.8.10/dist/summernote-bs4.min.js"></script>
    <script>
		$(document).ready(function() {
			$('textarea').summernote({
				height: 300,   //set editable area's height
			});
		});
	</script>
</body>
</html>

Note: We use CDN for all CSS and JS files without an internet connection you are not able to view design properly on your local system. Make sure you have an internet connection or download all files locally.

Demo Online

1 year ago
Zaid Bin Khalid
3853 Views
9

Validate Emails and send using PHPMailer and JQuery Ajax

How to add google reCaptcha into a website