在 Summernote 中创建自定义按钮插件

Question

我正在尝试在 Summernote 中创建一个自定义按钮插件，但 ui.button 当然会创建一个按钮。例如，有什么方法可以使它成为一个 div？

context.memo('button', function() {
                return ui.buttonGroup([
                    ui.button({
                        className: 'someClass',
                        tooltip: 'tooltipInfo',
                        data: {
                            toggle: 'dropdown'
                        },
                        click: function() {}
                    }),

我尝试做的是：

var buttonGroup = ui.buttonGroup([ ... ]);
buttonGroup.changeTag('div');
return buttonGroup;

然后手动更新按钮并将其标签更改为 div。它“有效”，但例如，我设置的 buttonGroup 中的单击事件在这种情况下不起作用。 甚至尝试将 on('click') 事件附加到 buttonGroup 变量，但仍然没有触发点击。

关于如何以另一种方式实现这一目标的任何想法？

Answer 1

为summernote创建按钮的过程比较简单，你应该先为你的按钮创建一个变量。

在此变量中，您将分配一个收集summernote UI 的函数，然后为其分配一个带有所需属性的按钮。

在加载summernote时，您将作为UI参数传递用于创建按钮的变量，如下例所示

var btnAttch = function (context) {
    var ui = $.summernote.ui;
    var button = ui.button({
        contents:
        '<label class="custom-file-upload"> <input type="file" class="input-file" id="input-file-' + id + '" multiple/>' +
        '<i class="glyphicon glyphicon-paperclip"></i> </label>',
         tooltip: 'Attach file',
     });
}

$(".txtInstrucoes-" + id).summernote({
     height: 300,
     toolbar: [
        ['style', ['bold', 'italic', 'underline']],
        ['color', ['color']],
        ['para', ['ul', 'ol', 'paragraph']],
        ['fontsize', ['fontsize']],
        ['btn-anexar', ['btnAnexar']]
     ],
     buttons: {
        btnAttch: btnAttch
     },
     disableDragAndDrop: true,
     disableResizeEditor: true,
     callbacks: {
        onInit: function () {
            $.EmpresaAPI.Events.OnChangeInputFile(id);
        },
      }
})