How To Hide Toolbar In Summernote Editor

Websolutionstuff | Sep-02-2020 | Categories : Laravel PHP jQuery

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>

Using above javascript we can disply specific toolbar in summernote.

For Example:

['style', ['bold', 'italic', 'underline', 'clear']],

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

['style', ['bold', 'italic']], //Specific toolbar display

 

Recommended Post
Featured Post
How To Convert HTML To PDF using JavaScript
How To Convert HTML To PDF usi...

In this example we will see how to convert html to pdf using javaScript. PDF file format is very useful to dow...

Read More

Aug-23-2021

How to Create Select2 Dropdown in Laravel 10 Livewire
How to Create Select2 Dropdown...

Hello developers! Today, we're diving into the wonderful world of Laravel 10 and Livewire to create a Select2 d...

Read More

Feb-16-2024

Scrolla - jQuery Plugin for Reveal Animations
Scrolla - jQuery Plugin for Re...

In this tutorial we will see how to use scrolla - jQuery plugin for reveal animations when scrolling a mouse. this jquer...

Read More

Apr-21-2021

Laravel 9 Ajax File Upload With Progress Bar
Laravel 9 Ajax File Upload Wit...

In this article, we will see the laravel 9 ajax file upload with a progress bar. we will learn how to file upload using...

Read More

Nov-15-2022