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?

Superior

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

Ripieno

Sorry i rejected the html tag but didn't seem it would fit for this, since it has nothing to do with html. Also, the question has been already solved by you. Thanks again for helping a year ago. – Superior

what is the value of id variable? – Mystery

it is there just because where I got it from my code there were a lot of different summernotes, you can pull it out and use only the class or id – Ripieno