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 Editor | StackCoder


SummerNote WYSIWYG Text Editor


TEXT EDITOR HTML JAVASCRIPT
16th July 2020 4 mins read
Share On     Share On WhatsApp   Buy Me Coffee | StackCoder Buy Coffee


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


What we will cover in this article


  1. Why SummerNote WYSIWYG Editor
  2. Downloading The SummerNote Libraries
  3. HTML File Structure
  4. Simple Implementation
  5. Toolbar Customization
  6. 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


  1. Firstly, It's open-source
  2. Very minimal, simple & beautiful
  3. Inserting external videos is a piece of cake
  4. Images get auto base64 encoded and will be saved to your database, off-course you can make it to save to the specific path
  5. Enabling & disabling feature's are at the tip of your fingers
  6. 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

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

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


WHATS NEXT?


Client-Side DataTable, Adding Super Powers To HTML Table

Multiple File Uploads In Laravel PHP

File Upload In Laravel PHP

How To Create Gmail App Password For SMTP Mails

Free Live Chat Integration Using TAWK.IO

Laravel Custom Maintenance Page


Happy Coding :)








Author Image
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