Create a custom button plugin in Summernote

Question

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?

Answer 1

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