是否可以重新初始化CKEditor组合框/下拉菜单？ [英] Is it possible to reinitialize a CKEditor Combobox/Drop Down Menu?

问题描述

如何动态更新下拉菜单中的项目？

我有一个CKEditor的自定义插件，填充下拉菜单中的项目列表可以注入到我的 textarea 。

这个项目列表来自一个名为

  var maptags = [] 
  

当你第一次点击 init时， ：函数。我的问题是，如果该数组中的项目更改为客户端更改页面上的内容，我如何重新加载该列表到更新的数组？

这里是我的CKEditor插件代码：

  CKEDITOR.plugins.add（'mapitems'，{
 require：['richcombo' //，'styles']，
 init：function（editor）{
 var config = editor.config，
 lang = editor.lang.format; 
 
 editor.ui.addRichCombo（'mapitems'，
 {
 label：Map Items，
 title：Map Items，
 voiceLabel：Map Items，
 className：'cke_format'，
 multiSelect：false，
 
面板：
 {
 css：[config.contentsCss，CKEDITOR.getUrl（editor.skinPath + 'editor.css'）]，
 voiceLabel：lang.panelVoiceLabel 
}，
 
 init：function（）{
 this.startGroup（Map Items） ; 
 //this.add('value'，'drop_text'，'drop_label'）; 
 for（var this_tag in maptags）{
 this.add（maptags [this_tag] [0]，maptags [this_tag] [1]，maptags [this_tag] [2]）; 
} 
}，
 
 onClick：function（value）{
 editor.focus（）; 
 editor.fire（'saveSnapshot'）; 
 editor.insertHtml（value）; 
 editor.fire（'saveSnapshot'）; 
} 
}）; 
} 
}）; 
  

解决方案

我想我只是解决了这个问题。 >

像这样更改init：

  init：function（）{
 var rebuildList = CKEDITOR.tools.bind（buildList，this）; 
 rebuildList（）; 
 $（editor）.bind（'rebuildList'，rebuildList）; 
}，
  

定义范围之外的buildList函数。

  var buildListHasRunOnce = 0; 
 var buildList = function（）{
 if（buildListHasRunOnce）{
 //从dom中删除旧的无序列表。 
 //这只是为了清除iframe中的旧列表
 $（this ._。panel ._。iframe。$）。contents（）。find（ul）。remove ; 
 // reset list 
 this ._。items = {}; 
 this ._。list ._。items = {}; 
} 
 for（var i in yourListOfItems）{
 var item = yourListOfItems [i]; 
 //添加调用
 this.add（item.id，'something here html'，item.text）; 
} 
 if（buildListHasRunOnce）{
 //强制CKEditor提交它通过this.add生成的html 
 this ._。committed = 0; //我们必须设置为false才能触发一个完整的提交（）
 this.commit（）; 
} 
 buildListHasRunOnce = 1; 
}; 
  

CKEDITOR.tools.bind函数的聪明之处在于，当我们绑定它，所以每当rebuildList被触发，这指的是richcombo对象本身，我不能得到任何其他方式。

希望这有帮助，它适用于我！

ElChe

How do I dynamically update the items in a drop down?

I have a custom plugin for CKEditor that populates a drop down menu with a list of items which I can inject into my textarea.

This list of items comes from a Javascript array called maptags, which is updated dynamically for each page.

var maptags = []

This list of tags gets added to the drop down when you first click on it by the init: function. My problem is what if the items in that array change as the client changes things on the page, how can I reload that list to the updated array?

Here is my CKEditor Plugin code:

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

        editor.ui.addRichCombo('mapitems',
        {
            label: "Map Items",
            title: "Map Items",
            voiceLabel: "Map Items",
            className: 'cke_format',
            multiSelect: false,

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

            init: function () {
                this.startGroup("Map Items");
                //this.add('value', 'drop_text', 'drop_label');
                for (var this_tag in maptags) {
                    this.add(maptags[this_tag][0], maptags[this_tag][1], maptags[this_tag][2]);
                }
            },

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

解决方案

I think I just solved this actually.

Change your init like this:

init: function () {
                var rebuildList = CKEDITOR.tools.bind(buildList, this);
                rebuildList();
                $(editor).bind('rebuildList', rebuildList);
            },

And define the buildList function outside that scope.

var buildListHasRunOnce = 0;
        var buildList = function () {
            if (buildListHasRunOnce) {
                // Remove the old unordered list from the dom.
                // This is just to cleanup the old list within the iframe
                $(this._.panel._.iframe.$).contents().find("ul").remove();
                // reset list
                this._.items = {};
                this._.list._.items = {};
            }
            for (var i in yourListOfItems) {
                var item = yourListOfItems[i];
                // do your add calls
                this.add(item.id, 'something here as html', item.text);
            }
            if (buildListHasRunOnce) {
                // Force CKEditor to commit the html it generates through this.add
                this._.committed = 0; // We have to set to false in order to trigger a complete commit()
                this.commit();
            }
            buildListHasRunOnce = 1;
        };

The clever thing about the CKEDITOR.tools.bind function is that we supply "this" when we bind it, so whenever the rebuildList is triggered, this refer to the richcombo object itself which I was not able to get any other way.

Hope this helps, it works fine for me!

ElChe

这篇关于是否可以重新初始化CKEditor组合框/下拉菜单？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！