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

时间:2018-12-28 16:58:12

标签: javascript jquery summernote

我试图在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中的click事件不起作用。 甚至尝试将on('click')事件附加到buttonGroup变量,但仍然不会触发点击。

关于如何以其他方式实现这一目标的任何想法?

1 个答案:

答案 0 :(得分:1)

这是将按钮放在summernote中的方法

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