Question

以下是该方案：我们正在开发类似CMS的工具，以管理各种电子邮件广告系列的副本。有一个表单允许用户选择一个模板来工作，其中包括一个tinymce编辑器（v4.1.6）。
为了支持通配符，按钮被用于获取值以填充tinymce中的下拉菜单。第一次这一切都很好，但是当用户选择一个新模板时（稍微更改一下这个形式，就会在菜单应该呈现一个空按钮。

我已经逐步完成代码，查看变量值的每一步，只发现每个变量都包含我希望它们保存的值，并且每个函数都在我需要的时间和地点被调用它被称为。在我的生活中，我不能弄清楚为什么我在第tinymce.init()周围被调用时没有得到相同的结果。无论如何，这是代码，它是一个相当大的模块的一部分，但tinyInit函数是非常独立的：

var tinyInit = (function()
{
    var i,menu =[],
        cbContainer = {
            editor: false,
            cb: function () {
                cbContainer.editor.execCommand(
                    'mceInsertContent',
                    false,
                    this._value
                );
            }
        };
    return function (btns)
    {
        var config = {
            selector: 'textarea',
            setup: function (editor) {
                cbContainer.editor = editor;
                editor.addButton('button', {
                    type: 'menubutton',
                    text: 'Placeholders',
                    name: 'placeholders',
                    icon: false,
                    menu: menu
                });
            },
            toolbar: " button "
        };
        for (i=0;i<tinymce.editors.length;++i) {
            //or tinymce.editors[i].remove();
            tinymce.execCommand('mceRemoveEditor', false, tinymce.editors[i].remove());
        }
        cbContainer.editor = false;
        btns = btns || $('.placeholders');
        for (i = 0, menu.splice(0, menu.length); i < btns.length; ++i) {
            menu.push(
                {
                    text: btns[i].textContent,
                    value: btns[i].value,
                    onclick: cbContainer.cb
                }
            );
        }
        (btns instanceof $ ? btns : $(btns)).remove();
        if (SomeGlobalModule.viewSource) {
            config.plugins = 'code';
        }
        tinymce.init(config);
    };
}());

最初，表单可能如下所示：

<textarea>Foobar</textarea>
<button class="placeholders" value="%NAME%">Name</button>
<button class="placeholders" value="%DATE%">Date</button>

哪种作用非常出色：textarea成为一个tinymce编辑器，并且会有一个菜单允许用户选择所选的占位符，将它们整齐地插入到内容中。但是，当选择新模板并重新加载整个表单（AJAX）时，我会从成功回调中调用此函数：

$.ajax({
    url: SomeGlobalModule.url,
    type: 'post',
    success: function(r)
    {
        //frm variable is updated elsewhere, but it's updated correct & reliably
        frm.replaceWith($(r));//replace form, frm references current element
        reinitMenus();
        tinyInit($('.placeholders'));//reinit tinymce
    }
});

同样，所有函数（包括setup回调）都被调用，menu变量始终具有预期值。那么，为什么不会填充下拉列表？

Answer 1

更新
下面列出的解决方案仍然是我使这个占位符菜单业务工作的唯一方法。与此同时，我已经找到了编写TinyMCE插件的时间，我已经提出了on github。因为我发现人们试图像我一样做同样的事情的证据，每次答案结果是编写自己的自定义插件，我决定创建一个拉请求，要求TinyMCE的维护者提供这个插件本身。如果您偶然发现这个问题/答案，并希望看到此插件包含在TinyMCE中make some noise。

我已经找到了一些时间来再次实际查看问题。我决定创建一个实际的插件，而不是使用setup回调添加按钮/菜单。为了让我的生活更轻松，我决定在我的tinyInit函数中将插件添加到管理器中，构建与以前相同的menu数组。代码现在看起来像这样：

var tinyInit = (function()
{
    var i,menu =[],
        cbContainer = {
            editor: false,
            cb: function () {
                tinymce.activeEditor.execCommand(
                    'mceInsertContent',
                    false,
                    this._value
                );
            }
        };
    return function (btns)
    {
        var config = {
            selector: 'textarea',
            plugins: ['placeholders'],
            toolbar1: "placeholders"
        };
        for (i=0;i<tinymce.editors.length;++i) {
            //or tinymce.editors[i].remove();
            tinymce.execCommand('mceRemoveEditor', false, tinymce.editors[i].remove());
        }
        cbContainer.editor = false;
        btns = btns || $('.placeholders');
        for (i = 0, menu.splice(0, menu.length); i < btns.length; ++i) {
            menu.push(
                {
                    text: btns[i].textContent,
                    value: btns[i].value,
                    onclick: cbContainer.cb
                }
            );
        }
        tinymce.PluginManager.add('placeholders', function(editor) {
            editor.addButton('placeholders', {
                text: 'Placeholders',
                type: 'menubutton',
                name: 'placeholders',
                icon: false,
                menu: menu
            });
        });
        (btns instanceof $ ? btns : $(btns)).remove();
        if (SomeGlobalModule.viewSource) {
            config.plugins = 'code';
        }
        tinymce.init(config);
    };
}());

我可能会研究一种将其创建为独立插件的方法，并提供几种方法来动态设置菜单内容（ajax请求，将菜单数组传递给init打电话等...）。同时，这种方法似乎工作得很好。我会留在这里以防其他人遇到与我相同的问题。

addButton第二次不工作

1 个答案: