ckeditor textarea yerine farklı araç çubuğuyla sınıf adını kullanarak confogurations

Question

Sayfalarıma ckeditor eklemek için aşağıdaki kodu kullanıyorum.

<textarea class="ckeditor" name="editor1"></textarea> 

Ben tüm başvurumu textareas tam bir araç çubuğu ihtiyaç gibi birkaç araç çubuğu yapılandırmaları tanımlamak istiyorum. İhtiyaçlarım için varsayılan araç çubuğu yapılandırmasını özelleştirdim, ancak bu, bazı metinlerim için daha temel bir araç çubuğunu daha da kırmak istiyor.

Ckeditor'u ayarlamak için sınıf özelliğini kullanıyorumsa bunu yapmanın bir yolu var mı?

Answer 1

Sınıf adına göre oluşturulmuş editörler için farklı yapılandırmaların olması mümkün değildir. Böyle bir durumda, sadece küresel CKEDITOR.config kabul edilir.

Yine de bu sorun için kolay bir çözüm var.

<textarea class="ckeditor" data-custom-config="myCustomConfig.js"> 
    Moo 
</textarea> 

Son olarak şu kodu kullanın: Şimdi

<script> 
    CKEDITOR.replaceClass = null; // Disable replacing by class 
</script> 

her <textarea> için böyle değiştirmek istiyor (config.customConfig gibi) data-custom-config özellik tanımlamak: Birincisi, dokümanın üst Bu komut dosyasını editörleri sınıf adına göre değiştirmek için (sınıfınızın ckeditor olduğunu varsayarak).

var textareas = Array.prototype.slice.call(document.getElementsByClassName('ckeditor')), 
    textarea, cfg, customCfg; 

while ((textarea = textareas.pop())) { 
    textarea = new CKEDITOR.dom.element(textarea); 
    cfg = {}; 

    if ((customCfg = textarea.getAttribute('data-custom-config'))) 
     cfg[ 'customConfig' ] = customCfg; 

    CKEDITOR.replace(textarea.getId(), cfg) 
} 

Ve şimdi üst kiraz gelir: Bu kod data-custom-config özelliğinde tanımlanan yapılandırma ile tahrik CKEditor örneği ile sınıfının ckeditor tüm textareas yerini alacak. myCustomConfig.js da özel araç çubuğu yapılandırma koyun: daha kolay eleman seçimi için jQuery dahil etmek bu kodu değiştirebilir Tabii

CKEDITOR.editorConfig = function(config) { 
    config.toolbar = [ 
     { name: 'basicstyles', items: [ 'Bold', 'Italic' ] } 
    ]; 
}; 

, edebi yerine config.customConfig ve benzeri bazı nesnesini kullanın. Bu, sorunun nasıl çözülebileceğinin bir göstergesi.