सीकेडिटर विभिन्न टूलबार confogurations

Question

के साथ कक्षा नाम का उपयोग कर टेक्स्टरेरा को प्रतिस्थापित करता है मैं अपने पृष्ठों पर ckeditor जोड़ने के लिए निम्न कोड का उपयोग कर रहा हूं।

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

मैं एक पूर्ण उपकरण पट्टी नहीं सब अपने आवेदन में textareas की जरूरत के रूप में कुछ उपकरण पट्टी विन्यास को परिभाषित करना चाहते हैं। मैंने अपनी ज़रूरतों के लिए डिफ़ॉल्ट टूलबार कॉन्फ़िगरेशन को कस्टमाइज़ किया है, लेकिन मेरे कुछ टेक्स्टरेज़ के लिए इसे और अधिक बुनियादी टूलबार पर और भी तोड़ना चाहूंगा।

यदि मैं ckeditor सेट करने के लिए कक्षा विशेषता का उपयोग कर रहा हूं तो ऐसा करने का कोई तरीका है?

Answer 1

कक्षा नाम द्वारा बनाए गए संपादकों के लिए अलग-अलग कॉन्फ़िगरेशन संभव नहीं है। ऐसे मामले में, केवल वैश्विक CKEDITOR.config माना जाता है।

अभी भी इस समस्या के लिए आसान कामकाज है। सबसे पहले, दस्तावेज़ के शीर्ष में इस स्क्रिप्ट को:

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

अब data-custom-config संपत्ति को परिभाषित (config.customConfig के रूप में) प्रत्येक <textarea> के लिए आप इस तरह बदलना चाहते हैं:

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

अंत में निम्नलिखित कोड का उपयोग वर्ग नाम से संपादकों को मैन्युअल रूप से प्रतिस्थापित करने के लिए (मान लें कि आपकी कक्षा ckeditor है)। इस कोड को config data-custom-config विशेषता में परिभाषित द्वारा संचालित CKEditor उदाहरण के साथ वर्ग ckeditor के सभी textareas बदल देगा:

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

और अब शीर्ष पर चेरी आता है। myCustomConfig.js में अपने कस्टम उपकरण पट्टी config रखो:

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

बेशक आप आसान तत्व चयन के लिए jQuery शामिल करने के लिए इस कोड को संशोधित कर सकते हैं, किसी वस्तु शाब्दिक बजाय config.customConfig और इतने पर इस्तेमाल करते हैं। यह सिर्फ एक शोकेस है कि समस्या को कैसे हल किया जा सकता है।