DEV Community

loading...

How To Hide Toolbar In Summernote Editor

websolutionstuff profile image Websolutionstuff Originally published at websolutionstuff.com ・1 min read

Summernote editor is rich textbox editor, using summernote editor you can take many actions like, insert image, add tables, changes font style, add links, add snippet code and many more feature provides.

In this small tutorial I will show you how to hide toolbar in summernote editor, many times customer's have requirement to enable only specific tool or option in summernote editor, for this we need to customize toolbar in summernote.

We can very easily enable or disable summernote tools in laravel or php using javascript.

<script>
    $(document).ready(function() {
        $('#summernote').summernote({
            height: 300, 
            placeholder: 'websolutionstuff.com',
            toolbar: [
            ['style', ['bold', 'italic']], //Specific toolbar display
            ['color', ['color']],
            ['para', ['ul', 'ol', 'paragraph']],
        });
    });
</script>
Enter fullscreen mode Exit fullscreen mode

Using above javascript we can disply specific toolbar in summernote.

For Example:

['style', ['bold', 'italic', 'underline', 'clear']],
Enter fullscreen mode Exit fullscreen mode

Currently 4 different font style display in summernote but if you need only specific then try below

['style', ['bold', 'italic']], //Specific toolbar display
Enter fullscreen mode Exit fullscreen mode

Read Also : How To Add Summernote Editor In Laravel

Discussion (0)

pic
Editor guide