CKEditor中RichCombo框的动态菜单

时间:2014-10-15 14:17:36

标签: javascript jquery ckeditor

我已经编写了一个插件,可以在我的CKEditor中添加RichCombo框。我希望能够在ListBox

中更新RichCombo中的内容

这是我的代码。

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更改时,此列表不会更新。有没有办法重新初始化插件,或者没有删除它并重新添加更新的内容?

注意我不想删除整个编辑器并替换它,因为这对用户来说非常不愉快

更新

根据要求,这是一个帮助

的小提琴手

http://jsfiddle.net/q8r0dkc4/

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

对于可以使下拉列表动态更新的人,每次调用200点奖励。

2 个答案:

答案 0 :(得分:3)

如何使用这样的CKEditors自定义事件?

首先获取对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

答案 1 :(得分:1)

我想我已经找到了解决方法。

richCombo的{​​{1}}函数中添加以下行: init

非常简单的JQuery修复,但每次单击这些输入框时,它都会重建列表。

提示证明:https://jsfiddle.net/q8r0dkc4/7/