Custom Summernote Button to create links with classes

Question

So I'm thoroughly confused as how to make a custom SummerNote button which will allow me to either add classes to an already inserted HTML element (i.e. links) or even wrap selected text in something like:

<button class="btn btn-primary"> **selected text** </button>

From the Summernote Deep Dive it shows how to create a custom button that inserts static text and I understand how to implement it. However, I can't seem to figure out how to make it dynamic for whatever text is selected. I've tried replacing the 'text' part of the example after context.invoke call but it doesn't convert the text to html, it just prints it.

The need is for creating links as buttons. Ideally I'd wish to access the Insert Link dialog already built into SummerNote to make buttons that will insert links with predefined classes but I'm not sure how complicated that would be.

Does anyone have any suggestions?

var bsButton = function (context) {
var ui = $.summernote.ui;

// create button
var button = ui.button({
    contents: 'Btn',
    tooltip: 'Create Button',
    click: function () {
        // invoke insertText method with 'hello' on editor module.
        context.invoke('editor.insertText', '<button class="btn btn-primary"></button>');
    }
});

return button.render();   // return button as jquery object
}

I've reviewed a ton of different posts but I haven't gotten much further than the example for what I'm trying to accomplish. Thanks in advance to anyone who takes the time to help.

Answer 1

As I was doing more research I stumbled upon Summernote's 'Awesome Summernote' GitHub page which led me to a plugin, summernote-addclass. While this doesn't necessarily answer the heart of the question (i.e. achieving this same thing without a plugin) but it does exactly what I need to do. Maybe this will help someone else in the future. Enjoy!