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

Upload File From Frontend Server {GuzzleHttp} To REST API Server In PHP {Laravel}

Install Apache Web Server On Ubuntu 20.04 / Linux & Manage It

Create Zip File On The Fly With Streaming Download In PHP Laravel

NGINX Security Best Practices & Optimization

SummerNote WYSIWYG Text Editor Save Images To Public Path In PHP Laravel

Simple Way To Create Resourceful API Controller In Laravel

Testing Laravel Emails With MailHog

Accessors & Mutators In Laravel. Problem In Set Attribute While Saving/Updating Data & How To Resolve It

Create / Save / Download PDF From Blade Template In PHP Laravel

Writing Clean Code In PHP

Create A Composer Package? Test It Locally And Add To Packagist Repository

Client-Side Form Validation With Javascript

Stripe Payment Integration With Laravel

Relationship Table Data With Route Model Binding In Laravel

Website Speed and Performance Optimizations

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