Custom toolbar with Summernote

Question

How do I know which functions can be enabled for the toolbar of summernote, and how to do it?

In the API docs all I can find is "toolbar : Array (optional)" without further explanation.

I've managed to enable some features thanks to one of the examples, but how can I also enable: code, indent and outdent?

$(".summernote").summernote({     styleWithSpan: false,     toolbar: [         ['style', ['bold', 'italic', 'underline', 'clear']],         ['color', ['color']],         ['para', ['ul', 'ol']]     ] }); 

Answer 1

in settings.js You have basic setting (with all features on):

toolbar: [     ['style', ['style']],     ['font', ['bold', 'italic', 'underline', 'clear']],     ['fontname', ['fontname']],     ['color', ['color']],     ['para', ['ul', 'ol', 'paragraph']],     ['height', ['height']],     ['table', ['table']],     ['insert', ['link', 'picture', 'hr']],     ['view', ['fullscreen', 'codeview']],     ['help', ['help']]   ], 

indentation is in 'paragraph'

Answer 2

paragraph includes indent and outdent, codeview as it suggests does codeview.

$('.summernote').summernote({     toolbar: [         //[groupname, [button list]]          ['style', ['bold', 'italic', 'underline', 'clear']],         ['color', ['color']],         ['para', ['ul', 'ol', 'paragraph']],         ['view', ['codeview']],     ] }); 

If you look on the main Summernote website as opposed to the API docs you will see a clear example, that explains how to customise the toolbar. It is on the Deep Dive page and scroll down to Custom Toolbar. It also lists the available toolbar buttons.

http://summernote.org/#/deep-dive#custom-toolbar