CODEWITHSUNDEEP
jquerysummernote
ipin upin
ipin upin

Reputation: 21

How to insert html tag to selected text - summernote

I'm setting up textarea with summernote, and want to create custom button that can insert code html tag

I try create simple custom button from summernote documentation

this my code

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

        // create button
        var button = ui.button({
            contents: '<i class="fa fa-code"/> Code',
            tooltip: 'Code',
            click: function (value) {
                var range = $('#textarea').summernote('createRange')
                // invoke insertText method with 'hello' on editor module.
                context.invoke('editor.insertHtml', '<code>'+range.toString()+'</code>');
            }
        });

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

let say I want to change <p>test</p> to be <p><code>test</code></p>, but code above doesn't change anything

Upvotes: 0

Views: 2244

Answers (1)

sanjeev
sanjeev

Reputation: 13

click: function (value) {
var text = context.invoke('editor.getSelectedText');
// You can initialize node with class instead of calling addClass.
var $node = $('<p><code">'+text+'</code></p>');

// http://summernote.org/deep-dive/#insertnode
context.invoke('editor.insertNode', $node[0]);
}

Upvotes: 1

Related Questions