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']]
    ]
});

Mordent

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'

Sanyu

This has moved to src/js/defaults.js and has slightly changed. – Jaw

Is it possible to finetune the ['style', ['style']] section? Like disable all except <p> and <h5> tags?? This is needed so the client can't mess up the design while using h1 tags that are not set in Sass. – Israelitish

To add video: ['insert', ['link', 'picture', 'video', 'hr']], – Tartarous

@NicolasV did you manage to get only <p> and <h5> tags? I also need this. – Janiculum

@AlexandruComan to manage this use the styleTags option: // default value is ['p', 'blockquote', 'pre', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'] styleTags: ['p', 'blockquote', 'pre'] – Sergiosergipe

Another note: styleTags option is a summernote option, not a toolbar option. – Jorie

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

Porkpie

In your toolbar you set ['style', ['bold', 'italic',... where do you set h5tags? Instead of useing ALL the styles like this: ['style', ['style']]? – Israelitish