2011-10-14 13 views
7

Öğeleri bir açılır penceredeki dinamik olarak nasıl güncellerim?Bir CKEditor Combobox/Drop Down Menüsünü yeniden başlatmak mümkün mü?

CKEditor için bir açılır menüyü, textarea benim içine enjekte edebileceğim öğeler listesiyle dolduran özel bir eklentim var.

Öğelerin listesi, her sayfa için dinamik olarak güncelleştirilen maptags adlı bir Javascript dizisinden gelir. İlk init: işlevi tarafından kendisine tıkladığınızda

var maptags = [] 

etiketleri Bu liste

açılan ekleniyor. Sorunum, istemcideki öğeler sayfada değişiklik yaptıkça bu dizideki öğeler değişirse, bu listeyi güncel diziye nasıl yükleyebilirim? Ben sadece aslında bu çözdük

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

cevap

12

:

İşte benim CKEditor Eklenti kodudur.

bu gibi init değiştirme

:

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

Ve bu kapsam dışında buildList işlevini tanımlar.

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 işlevi hakkında akıllı şey biz bağlamak zaman rebuildList tetiklendiğinde "Bu", bu nedenle, bu şimdiye kadar mümkün değildi hangi richcombo nesnenin kendisine atıfta tedarik olmasıdır başka bir yol olsun.

Bu yardımcı olur umarım, benim için iyi çalışır!

Elche

+0

olur ama sunucudan getirilecek verilerle yukarıdaki çözüm kullanarak çalıştığınızda, boş gösterir. Yardım edebilir misin? –

+0

öğelerinizi sunucudan alın örn. Ajax çağrı ve onları "yourListOfItems" dizisine koyun –

+0

Bu biraz dağınık, ama beni doğru yolda aldım. Teşekkürler! Not; richCombo nesnesinin yapısı garip ve şanslıdır ve bu yetenek gerçekten de onu dışarıdan kesmek yerine richCombo'nun bir parçası olmalıdır. –

0

Ben richcombo etrafında herhangi yararlı documenatation bulamadık, ben kaynak koduna bir göz attım ve ben gerekli olayların bir fikrim var.

@El Che bu sorunun çözümü yoluyla almak için bana yardımcı oldu ama daha karmaşık bir combobox yapısını (arama, gruplar)

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

NOT Yukarıdaki tüm kod vardı çünkü ben soruna başka bir yaklaşım vardı addRichCombo init callback'inde içindedir

  • Ben
  • ben "panelShow" olayı combobox yeniden doldurmak "panelHide" etkinliği üzerindeki combobox içeriği kaldırmak

Umut bu Bu çözüm statik verilerle çalışıyor

İlgili konular