CKEditor Combobox/드롭 다운 메뉴를 다시 초기화 할 수 있습니까?

Question

드롭 다운의 항목을 어떻게 동적으로 업데이트합니까?

나는 textarea에 삽입 할 수있는 항목 목록이있는 드롭 다운 메뉴를 채우는 CKEditor 용 사용자 정의 플러그인이 있습니다.

이 항목 목록은 각 페이지마다 동적으로 업데이트되는 maptags이라는 자바 스크립트 배열에서 가져옵니다. 먼저 init: 기능에 의해 그것을 클릭하면

var maptags = [] 

태그이 목록

는 드롭 다운에 추가됩니다. 내 문제는 클라이언트가 페이지에서 내용을 변경함에 따라 배열의 항목이 변경되면 어떻게 업데이트 된 배열에 해당 목록을 다시로드 할 수 있습니까? 난 그냥 실제로이 문제를 해결할 생각

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

참고 위의 모든 코드를했기 때문에 나는이 문제에 다른 접근 방식을 가지고 있었다 addRichCombo 초기화 콜백 안에

• 나는
• 내가 "panelShow"이벤트에 콤보 상자를 다시 채 웁니다 "panelHide"이벤트에 콤보 상자의 내용을 삭제

희망이이 솔루션은 정적 데이터와 잘 작동