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

Question

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

7

我正在尝试在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变量，但仍然无法触发单击。

有没有其他方法可以实现这个功能呢？

- msqar

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Lucas · Accepted Answer

创建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);
        },
      }
})