CKEditor Combobox /ドロップダウンメニューを再初期化することはできますか？

Question

ドロップダウンの項目を動的に更新するにはどうすればよいですか？

私はtextareaに注入できる項目のリストをドロップダウンメニューに入力するCKEditor用のカスタムプラグインを持っています。

この項目のリストは、maptagsと呼ばれるJavascript配列に由来し、ページごとに動的に更新されます。

var maptags = [] 

あなたが最初init:機能によって、それをクリックすると、タグのリストは、ドロップダウンに追加されます。私の問題は、クライアントがページ上のものを変更すると、その配列の項目が変更された場合、そのリストを更新された配列にどのように再ロードできますか？私はちょうど実際にこれを解決すると思う

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

Answer 1

：

は、ここに私のCKEditorバージョンのプラグインコードです。

このようなあなたの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オブジェクト自体を参照し、それをバインドするときに我々は、「これを」提供することです他の方法で取得します。

希望すると、これはうまく動作します。

エルチェ

Answer 2

私は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 = {}; 
       }); 

NOTE すべての上記のコードを持っていたので、私はこの問題に別のアプローチを持っていましたaddRichComboのinitコールバック

• の内側に私は「panelShow」イベントでコンボボックスを再作成する「panelHide」イベントに
• をコンボボックスのコンテンツを削除されます

希望これは