DEV Community 👩‍💻👨‍💻

Techsolutionstuff
Techsolutionstuff

Posted on • Originally published at techsolutionstuff.com

How To Hide Toolbar In Summernote Editor

In this tutorial I will show you how to hide toolbar in summernote editor, many times customer's have requirement to enable only specific tools or options in summernote editor. for this time we need to customize toolbar in summernote. you can hide any specific toolbar in summernote editor or you want display only specific tools then just use toolbar() in jquery.

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.


Read Also : How To Add Summernote Editor In Laravel 8


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

You might also like :

Top comments (0)

Need a better mental model for async/await?

Check out this classic DEV post on the subject.

⭐️🎀 JavaScript Visualized: Promises & Async/Await

async await