Good content takes time and effort to come up with.

Please consider supporting us by just disabling your AD BLOCKER and reloading this page again.

SummerNote WYSIWYG Text Editor

16th July 2020 3 mins read

Share On

Hola! Let's integrate the SummerNote WYSIWYG text editor for our HTML textarea.

What we will cover in this article

Why SummerNote WYSIWYG Editor
Downloading The SummerNote Libraries
HTML File Structure
Simple Implementation
Toolbar Customization
Complete Example Code

NOTE: Code available in GitHub @ SummerNote WYSIWYG Editor

SummerNote Official Website

1) Why SummerNote WYSIWYG Editor

I highly recommend SummerNote because of the following advantages

Firstly, It's open-source
Very minimal, simple & beautiful
Inserting external videos is a piece of cake
Images get auto base64 encoded and will be saved to your database, off-course you can make it to save to the specific path
Enabling & disabling feature's are at the tip of your fingers
Works out of the box with Bootstrap 3 & Bootstrap 4 versions

2) Downloading The SummerNote Libraries

I will use CDN (Content Delivery Network) instead of downloading and placing them in my HTML file. But if would like to work offline then please go ahead and use the URLs to download the content and save them with respective file names.

jQuery

CDN / Download URL - jQuery CDN

SummerNote Bootstrap 4 Library

CDN / Download URL - SummerNote JS

CDN / Download URL - SummerNote CSS

SummerNote Lite Without Any FrameWork

CDN / Download URL - SummerNote JS

CDN / Download URL - SummerNote CSS

3) HTML File Structure

In the following HTML file structure, I am using SummerNote lite version without any framework

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SummerNote Demo</title>
    <link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.css" rel="stylesheet">
</head>
<body>
    <!-- Your HTML Body Goes Here -->

    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.js"></script>
</body>
</html>

4) Simple Implementation

Let's instantiate the textarea with summernote js

HTML Textarea

<div>
    <label for="body">Body</label> <br>
    <textarea name="body" id="body" rows="10"></textarea>
</div>

Make sure to add id or class attribute for textarea as we will be using the same to instantiate the same for summernote

SummerNote Javascript

<script>
    $(document).ready(function() {
        $('textarea#body').summernote({
            height: '300px'
        });
    });
</script>

And you will be able to see the following default textarea converted to very beautiful WYSIWYG editor as follows

SummerNote Basic Textarea Style

5) - Toolbar Customization

Now we got to know how to setup SummerNote text editor. Let's customize toolbar a bit

$(document).ready(function() {
    $('textarea#body').summernote({
        /** Default place holder for the WYSIWYG editor */
        placeholder: 'Enter your body',


        /** Height Settings */
        height: '300px',


        /** Toolbar settings */
        toolbar: [
            ['style', ['bold', 'italic', 'underline', 'clear']],
            ['font', ['strikethrough', 'superscript', 'subscript']],
            ['fontsize', ['fontsize']],
            ['color', ['color']],
            ['para', ['ul', 'ol', 'paragraph']],
            ['height', ['height']]
        ]
    });
});

The settings are self-explanatory so I have not added much on it. Now our text editor looks like the following

SummerNote WYSIWYG Editor Customized

6) Complete Example Code

Following is the complete code for the summernote text editor

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SummerNote Demo</title>
    <link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.css" rel="stylesheet">
</head>
<body>
    <form action="" method="post" enctype="multipart/form-data">
        <!-- Your HTML Body Goes Here -->
        <div>
            <label for="body">Body</label> <br>
            <textarea name="body" id="body" rows="10"></textarea>
        </div>
    </form>

    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.js"></script>

    <script>
        $(document).ready(function() {
            $('textarea#body').summernote({
                /** Default place holder for the WYSIWYG editor */
                placeholder: 'Enter your body',

                /** Height Settings */
                height: '300px',

                /** Toolbar settings */
                toolbar: [
                    ['style', ['bold', 'italic', 'underline', 'clear']],
                    ['font', ['strikethrough', 'superscript', 'subscript']],
                    ['fontsize', ['fontsize']],
                    ['color', ['color']],
                    ['para', ['ul', 'ol', 'paragraph']],
                    ['height', ['height']]
                ]
            });
        });
    </script>
</body>
</html>

Conclusion

Hope you enjoyed the article. Please share it with your friends.

NOTE: Code available in GitHub @ SummerNote WYSIWYG Editor

Articles For You

Responsive YouTube Videos

Client-Side Form Validation With Javascript

Test Your Local Developing Laravel Web Application From Phone Browser Without Any Software

SummerNote WYSIWYG Text Editor

SQLite Doesn't Support Dropping Foreign Keys in Laravel

Custom Validation Rules In PHP Laravel (Using Artisan Command)

Select2 Dropdown

Cache Static Files With NGINX Server

Integrate Google Translate Into Your Website

GitHub Login With PHP Laravel Socialite

Generate SSH Key with ssh-keygen In Linux / Unix

Move Uploaded Files From Local Computer Or Server To Amazon S3 Bucket In PHP

Laravel Custom Maintenance Page

What Is HTTP? Different HTTP Methods And Status Codes Explained With Examples

Testing Laravel Emails With MailHog

AUTHOR

Channaveer Hakari

I am a full-stack developer working at WifiDabba India Pvt Ltd. I started this blog so that I can share my knowledge and enhance my skills with constant learning.

Never stop learning. If you stop learning, you stop growing