javascript - Create a custom button plugin in Summernote - Stack Overflow

admin管理员组

文章数量:1401797

I'm trying to create a custom button plugin in Summernote, but the ui.button creates of course, a button. Is there any way to make that a div for example?

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

What I tried is to do:

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

Then update manually the button and change its tag to div. It "works" but for instance, the click event in the buttonGroup that I set doesn't work in this case. Even tried attaching an on('click') event to buttonGroup variable, and still, the click isn't triggering.

Any ideas on how I can achieve this in another way?

I'm trying to create a custom button plugin in Summernote, but the ui.button creates of course, a button. Is there any way to make that a div for example?

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

What I tried is to do:

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

Then update manually the button and change its tag to div. It "works" but for instance, the click event in the buttonGroup that I set doesn't work in this case. Even tried attaching an on('click') event to buttonGroup variable, and still, the click isn't triggering.

Any ideas on how I can achieve this in another way?

• javascript
• jquery
• summernote

Share Improve this question Follow asked Dec 28, 2018 at 16:58 msqarmsqar 3,04066 gold badges5252 silver badges100100 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

The process of creating a button for summernote is relatively simple, you should first create a variable for your button.

In this variable you will assign a function that collects the summernote UI and then assign it a button with the desired properties inside it.

Already when loading summernote you will pass as the parameter of UI the variable used to create your button, as you can see in the example below

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

本文标签： javascriptCreate a custom button plugin in SummernoteStack Overflow