我编写了一个插件,它为我的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来帮助
在这个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
});
即使这看起来很直截了当,我也不认为它是完全脱钩的。 (但仍然工作)
翻译自:https://stackoverflow.com/questions/26384868/dynamic-menu-for-a-richcombo-box-in-ckeditor