CODEWITHSUNDEEP
javascriptjqueryarrayssummernote
Basti G.
Basti G.

Reputation: 441

Add dynamic custom buttons as array in summernote

I use the wysiwyg editor "summernote" and codeigniter. I want add my own buttons to the toolbar that insert spezific text on click. That scenario is describes in the summernote documentation.

Summernote:

$('#model_txt').summernote({
    height: 250,

    toolbar: [
        ['style', ['bold', 'italic', 'underline', 'clear']],
        ['font', ['strikethrough', 'superscript', 'subscript']],
        ['fontsize', ['fontsize']],
        ['color', ['color']],
        ['para', ['ul', 'ol', 'paragraph']],
        ['height', ['height']]
    ]
});

But i get the button names respectively the text that insert on click from a database. I get the data with an ajax call that call a PHP function that print the data from the query.

AJAX call:

var all_vars = null;

$.ajax({url: "get_vars", success: function(result){
     all_vars = result.split(";");
});

Now i have an array that contains the names (example: all_vars[0]). But i don't know how can i insert the names as buttons in the toolbar... can you help me?

Can't anybody help me? I try this with the JS function eval() and it works but i think its not the best solution...

The PHP function on "127.0.0.1/create_var_buttons" create the JS code dynamicly.

<script>
$(document).ready(function() {

    var resturl = 'http://127.0.0.1/create_var_buttons';

    $.ajax({
        url: resturl,
        success: function(data){
            eval(data);
        }
    });

});

Upvotes: 2

Views: 1650

Answers (1)

AngeloPinheiro
AngeloPinheiro

Reputation: 31

I faced the same need before and done this way:

  • I had to declare a variable to hold the summernote's toolbar array:

    var toolbar = [ ['style', ['bold', 'italic', 'underline', 'clear']], ['insert', ['picture', 'link']], ['misc', ['undo', 'redo', 'codeview']], ['para', ['ul', 'ol', 'paragraph']], ['fontsize', ['fontsize', 'height']], ['color', ['color']], ['forecolor', ['forecolor']], ['custom', ['forcarJustificar']] ];

  • Another to hold the data to summernotes's "buttons" property:

    var opt_btns_custom = { forcarJustificar: forcarJustificar };

  • Another variable to hold the entire summernote's options:

    var sm_options = { height: altura, toolbar: toolbar, buttons: opt_btns_custom, callbacks: {} }

  • Then I wrote the function below that I call into the Ajax's .done() for each button that need to be created:

    function addBtnText(b_content, b_tooltip, text) {

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

    options = {
        contents: b_content,
        tooltip: b_tooltip,
        click: function () {
            context.invoke('editor.insertText', text);
        }
    }

    var button = ui.button(options);

    return button.render();
}

i = Math.floor(Math.random() * (1000 - 1 + 1)) + 1;

toolbar.push(['custom', ['sm_botao_custom_'+i]]);

opt_btns_custom['sm_botao_custom_'+i] = sm_botao_custom;

//Restart SM to apply the created buttons
$('#d_summernote').summernote('destroy');
$('#d_summernote').summernote(sm_options);

    }

OBS: I use a random number (i) to avoid conflict problems with the buttons inside the SM.

Upvotes: 1

Related Questions