Создайте пользовательский плагин кнопки в Summernote - PullRequest
Новая
       7

Создайте пользовательский плагин кнопки в Summernote

0 голосов
/ 28 декабря 2018

Я пытаюсь создать собственный плагин для кнопок в 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.Это «работает», но, например, событие click в buttonGroup, которое я установил, не работает в этом случае.Даже пытался прикрепить событие on ('click') к переменной buttonGroup, и, тем не менее, щелчок не срабатывает.

Есть идеи, как мне добиться этого другим способом?

1 Ответ

0 голосов
/ 28 декабря 2018

Процесс создания кнопки для summernote является относительно простым, сначала вы должны создать переменную для своей кнопки.

В этой переменной вы назначите функцию, которая собирает пользовательский интерфейс summernote, а затем назначите ей кнопку.с желаемыми свойствами внутри него.

Уже при загрузке 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);
        },
      }
})
...