是否可以重新初始化CKEditor组合框/下拉菜单？

如何动态更新下拉菜单中的项目？是否可以重新初始化CKEditor组合框/下拉菜单？

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

这个项目列表来自一个名为maptags的Javascript数组，它为每个页面动态更新。

var maptags = []

的标签这份名单被添加到下拉当你第一次点击它由init:功能。我的问题是，如果该数组中的项目随着客户端更改页面上的内容而发生变化，那么如何将该列表重新加载到更新的数组中？

这里是我的CKEditor插件代码：

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'); 
      } 
     }); 
    } 
});

来源

2011-10-14 user994689

我想我只是解决了这个实际。

改变你的init是这样的：

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

，并定义范围之外buildList功能。

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; 
     };

有关CKEDITOR.tools.bind功能巧妙的是，我们提供“本”当我们绑定，所以每当rebuildList被触发，这指的是richcombo对象本身，我没能得到其他方式。

希望这会有所帮助，它适合我！

埃尔切

来源

2011-12-06 08:43:16

这个解决方案正常工作与静态数据，但是当我尝试使用从服务器获取数据的上述解决方案，它显示为空白。你能帮我吗？ –

从服务器获取您的物品从Ajax调用并将它们放在“yourListOfItems”数组中 –

这有点混乱，但它让我走上了正确的轨道。谢谢！附： richCombo对象的结构很奇怪而且很糟糕，而且这种能力真的应该是richCombo的一部分，而不必从外部入侵它。 –

我找不到各地richcombo任何有用的documenatation，我接过来一看源代码，并获得我所需要的事件的想法。

@El车解决方案帮助我通过这个问题来获得，但我有另一种解决问题的方法，因为我有一个更复杂的组合框结构（搜索，团体）

  var _this = this; 
       populateCombo.call(_this, data); 

       function populateCombo(data) { 
        /* I have a search workaround added here */ 

        this.startGroup('Default'); /* create default group */ 

        /* add items with your logic */ 
        for (var i = 0; i < data.length; i++) { 
         var dataitem = data[i]; 
         this.add(dataitem.name, dataitem.description, dataitem.name); 
        } 

        /* other groups .... */ 
       } 

       var buildListHasRunOnce = 0; 
       /* triggered when combo is shown */ 
       editor.on("panelShow", function(){ 
        if (buildListHasRunOnce) { 
         // reset list 
         populateCombo.call(_this, data); 
        } 
        buildListHasRunOnce = 1; 
       }); 

       /* triggered when combo is hidden */ 
       editor.on("panelHide", function(){ 
        $(_this._.list.element.$).empty(); 
        _this._.items = {}; 
        _this._.list._.items = {}; 
       });

注意所有上面的代码是addRichCombo初始化回调内部

我删除组合框的内容的“panelHide”事件
我重新填充组合框的“panelShow”事件

希望这有助于

来源

2016-04-28 08:39:59

是否可以重新初始化CKEditor组合框/下拉菜单？

回答

相关问题