如何将自定义按钮添加到 Summernote 工具栏

Question

还有其他人对此有疑问吗？我按照文档进行操作，但未显示该按钮。它只是创建一个空的 div。控制台中没有错误。

文档：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
    }   
});

已渲染 HTML

Answer 1

我想通了。所以我不得不将 HelloButton 函数放在 $(document).ready()

之外

如何将自定义按钮添加到 Summernote 工具栏

How to add custom buttons to Summernote toolbar

javascript

summernote