【问题标题】:Custom number of buttons tinymce自定义按钮数量 tinymce
【发布时间】:2019-05-16 21:09:09
【问题描述】:

如何使用 JQuery 创建自定义按钮 tinymce 按钮?我需要 n 个“菜单项”按钮。在打开 tinymce 编辑器之前,将根据所选数据定义“n”。

我的按钮:

editor.addButton('addButtons', {
        type: 'menubutton',
        text: 'My button',
        icon: false,
        menu: [
            {
                text: 'Menu item 1',
                onclick: function() {
                    editor.insertContent('&nbsp;<strong>item1</strong>&nbsp;');
                }
            }, {
                text: 'Menu item 2',
                onclick: function() {
                    editor.insertContent('&nbsp;<strong>item2</strong>&nbsp;');
                }
            }, {
                text: 'Menu item 3',
                onclick: function() {
                    editor.insertContent('&nbsp;<strong>item3</strong>&nbsp;');
                }
            }
        ] 
    });

我可以从使用 JQuery $("#totalButtons").val() 隐藏的输入类型中获取“n”值。如果 totalButtons 是 4,我需要 4 个项目按钮。是否有意义?有可能吗?

谢谢

更新代码:

var n = $('#total').val();
var menuItems = [];

  tinymce.init({
    selector: '#mytextareaTenant',
    content_css: 'https://fonts.googleapis.com/css?family=Aguafina+Script|Alex+Brush|Bilbo|Condiment|Great+Vibes|Herr+Von+Muellerhoff|Kristi|Meddon|Monsieur+La+Doulaise|Norican|Nothing+You+Could+Do|Parisienne|Permanent+Marker|Sacramento|Yellowtail',
    theme: 'modern',
    menubar: false,
    plugins: [
        "print"
    ],           

    setup: function (editor) { 
        editor.on('init', function (e) {
            renderEditorTenant();

            for (var i=1; i<=n; i++){
                var msg = '&nbsp;<strong>#item' + i + '#</strong>&nbsp;';
                var obj = {
                    text: 'Menu item ' + i,
                    onclick: function() {
                        editor.insertContent(msg);
                    }
                }
                menuItems.push(obj);
            }
        });

【问题讨论】:

标签: javascript jquery tinymce


【解决方案1】:

假设你有一个这样的隐藏输入:

<input type="hidden" id="foo" name="zyx" value="3" />

您可以获取输入的值并生成带有n元素的数组:

var n = $('#foo').val();
var menuItems = [];

for (var i=0; i<n; i++){
  var msg = '&nbsp;<strong>item' + i + '</strong>&nbsp;';
  var obj = {
    text: 'Menu item ' + i,
    onclick: function() {
        editor.insertContent(msg);
    }
}
  menuItems.push(obj);
}

现在,只需将此数组传递给您用来生成编辑器的函数:

editor.addButton('addButtons', {
        type: 'menubutton',
        text: 'My button',
        icon: false,
        menu: menuItems
    });

【讨论】:

  • 很有帮助;但是,单击按钮时出现错误:“未定义编辑器”。
  • 在这种情况下,我猜您在原始问题中提供的带有 3 个静态项的代码也不起作用。你检查过 TinyMCE 的文档吗?你能提供一个最小的、可复制的例子吗? (请参阅stackoverflow.com/help/reprex
  • 代码正在运行。我认为问题在于 var menuItems 是在 tinymce.init() 之前创建的,所以我们当时没有编辑器。
  • 您的代码在 tinymce.init({}) 块内吗? tiny.cloud/docs-4x/api/tinymce/tinymce.editor/#addbutton
  • 我刚刚更新了代码以显示我是如何将您的代码插入到 tinymce 中的。当我单击菜单项 1 时,它会插入文本 item2 而不是 item1。为什么会这样?
猜你喜欢
  • 1970-01-01
  • 2017-11-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2022-12-23
  • 2020-05-07
  • 2016-10-21
相关资源
最近更新 更多