How To Hide Toolbar In Summernote Editor

Websolutionstuff
1 min readJan 21, 2021

--

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>

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

Read Also : How To Add Summernote Editor In Laravel

Thanks For Reading !!

--

--

Websolutionstuff
Websolutionstuff

Written by Websolutionstuff

I am Laravel and PHP Developer. I have also Good Knowledge of JavaScript, jQuery, Bootstrap and REST API. Visit Website: http://websolutionstuff.com/

No responses yet