时间戳

首页 > 解决方案 > 在summernote中添加动态自定义按钮作为数组

javascript - 在summernote中添加动态自定义按钮作为数组

问题描述

我使用所见即所得的编辑器“summernote”和codeigniter。我想将我自己的按钮添加到单击时插入特定文本的工具栏。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']]
    ]
});

但是我分别获得了按钮名称，即从数据库中单击时插入的文本。我通过调用一个 PHP 函数的 ajax 调用来获取数据，该函数从查询中打印数据。

AJAX 调用：

var all_vars = null;

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

现在我有一个包含名称的数组（例如：）all_vars[0]。但我不知道如何将名称作为按钮插入工具栏中...你能帮帮我吗？

没有人能帮助我吗？我用 JS 函数 eval() 试试这个，它可以工作，但我认为它不是最好的解决方案......

“127.0.0.1/create_var_buttons”上的 PHP 函数动态创建 JS 代码。

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

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

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

});

标签： javascriptjqueryarrayssummernote

解决方案

我之前遇到过同样的需求并这样做：

  • 我必须声明一个变量来保存 Summernote 的工具栏数组：

    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']] ];

  • 另一个将数据保存到summernotes的“按钮”属性：

    var opt_btns_custom = { forcarJustificar: forcarJustificar };

  • 保存整个summernote选项的另一个变量：

    var sm_options = { 高度：altura，工具栏：工具栏，按钮：opt_btns_custom，回调：{} }

  • 然后我编写了下面的函数，我为需要创建的每个按钮调用了 Ajax 的 .done()：

    函数 addBtnText（b_content，b_tooltip，文本）{

    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) 以避免与 SM 内的按钮发生冲突问题。

推荐阅读