javascript – CKEditor中RichCombo框的动态菜单

我编写了一个插件,它为我的CKEditor添加了一个RichCombo框。我想要能够更新此RichCombo内的ListBox中的内容

这是我的代码

var merge_fields = [];

CKEDITOR.plugins.add('mergefields',
{
    requires: ['richcombo'], //, 'styles' ],
    init: function (editor) {
        var config = editor.config,
           lang = editor.lang.format;

        // Gets the list of tags from the settings.
        var tags = merge_fields; //new Array();

        // Create style objects for all defined styles.
        editor.ui.addRichCombo('tokens',
        {
            label: "Merge",
            title: "title",
            voiceLabel: "voiceLabel",
            className: 'cke_format',
            multiSelect: false,

            panel:
            {
                css: [config.contentsCss, CKEDITOR.getUrl(CKEDITOR.skin.getPath('editor') + 'editor.css')],
                voiceLabel: lang.panelVoiceLabel
            },

            init: function () {
                // this.startGroup("mergefields");
                for (var this_tag in tags) {
                    this.add(tags[this_tag], tags[this_tag], tags[this_tag]);
                }
            },

            onClick: function (value) {
                editor.focus();
                editor.fire('saveSnapshot');
                editor.insertText(value);
                editor.fire('saveSnapshot');
            }
        });
    }
});

不幸的是,当merge_fields更改时,此列表不会更新。有没有办法重新初始化插件,否则删除它并重新添加更新的内容?

注意,Id不希望删除整个编辑器并替换它,因为这对用户看起来非常不愉快

UPDATE

根据要求,这里是一个jsfiddle来帮助

http://jsfiddle.net/q8r0dkc4/

在这个JSFiddle中,您会看到菜单在第一次访问时被动态创建。应该应该选中的复选框。但是,随后每次访问时,它保持相同的值,并且不会被更新。更新它的唯一方法是使用我提供的重新启动按钮重新初始化编辑器,但这会导致编辑器消失并重新出现,所以我不想这样做。

对于可以让下拉列表动态更新每个被调用的时间的人,可以获得200点的赏金。

如何使用CKEditor自定义事件呢?

首先参考CKEditors实例

var myinstance = CKEDITOR.instances.editor1;

由于复选框不在CKEditor的范围内,因此将复选框添加到更改处理程序中

$(':checkbox').change(function () {
    myinstance.fire('updateList'); // here is where you will fire the custom event
});

插件定义在编辑器中添加一个事件侦听器

editor.on("updateList", function () { // this is the checkbox change listener
  self.buildList(); // the entire build is created again here
});

插件内部的复选框(不在CKEditor范围之外)直接附加事件,而是使用CKEditor的自定义事件。现在编辑器实例和复选框已解耦。

这是一个DEMO

希望这可以帮助

更新

选项2

插件的方法可以这样直接调用

$(':checkbox').change(function () {
    CKEDITOR.instances.editor1.ui.instances.Merge.buildList(); //this method should build the entire list again
});

即使这看起来很直截了当,我也不认为它是完全脱钩的。 (但仍然工作)

这是demo for option 2

http://stackoverflow.com/questions/26384868/dynamic-menu-for-a-richcombo-box-in-ckeditor

本站文章除注明转载外,均为本站原创或编译
转载请明显位置注明出处:javascript – CKEditor中RichCombo框的动态菜单