CODEWITHSUNDEEP
javascriptsummernote
Seth
Seth

Reputation: 169

How to add custom buttons to Summernote toolbar

Anyone else having problems with this? I followed the docs but the button is not showing up. It just creates an empty div. No errors in console.

Docs: https://summernote.org/deep-dive/#custom-button

JS

$(document).ready(function() {
    $('#summernote').summernote({
        toolbar: [
            ['mybutton', ['hello']]
        ],
        buttons: {
            hello: HelloButton
        }
    });

    var HelloButton = function (context) {
    var ui = $.summernote.ui;

    // create button
    var button = ui.button({
        contents: '<i class="fa fa-child"/> Hello',
        tooltip: 'hello',
        click: function () {
        // invoke insertText method with 'hello' on editor module.
        context.invoke('editor.insertText', 'hello');
        }
    });

        return button.render();   // return button as jquery object
    }   
});

Rendered HTML

enter image description here

enter image description here

Upvotes: 3

Views: 6230

Answers (1)

Seth
Seth

Reputation: 169

I figured it out. So I had to put the HelloButton function outside of $(document).ready()

Upvotes: 3

Related Questions