How to install Summernote WYSIWYG with Bootstrap 4

Demo Online

3 years ago
Zaid Bin Khalid
14076 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

3 years ago
Zaid Bin Khalid
14076 Views
9

Prev Next

Related Linkes

How to install Summernote WYSIWYG with Bootstrap 4