अलग-अलग ऊंचाइयों के साथ कई उदाहरणों के लिए सीकेएडिटर कैसे स्थापित करें?

Question

मैं एक ही कॉन्फ़िगरेशन सेटिंग्स के आधार पर सीकेडिटर के कई उदाहरण प्राप्त करना चाहता हूं, लेकिन विभिन्न ऊंचाइयों के साथ। मैं डिफ़ॉल्ट ऊंचाई के साथ config स्थापित करने की कोशिश की, 1 उदाहरण स्थापित करने, फिर 2 उदाहरण स्थापित करने ऊंचाई & अधिभावी:

var config = { 
    ..... 
    height:'400' 
}; 

$('#editor1').ckeditor(config); 
config.height = '100'; 
$('#editor2').ckeditor(config); 

... लेकिन मैं दो CKEditor उदाहरणों दोनों 100px ऊंचाई है कि मिल ।

मैं भी इस की कोशिश की:

CKEDITOR.replace('editor2',{ 
    height: '100' 
}); 

.. मैं त्रुटि संदेश जो उदाहरण पहले से ही अस्तित्व में मिला है। मैंने थोड़ी सी & की खोज की जो किसी भी स्थिति में किसी को भी सलाह मिली है कि आपको() को प्रतिस्थापित करने से पहले उदाहरण को नष्ट करना होगा(), लेकिन यह प्रारंभिक ऊंचाई को सेट करने के लिए बहुत जटिल लगता है।

अंत मैं दो अलग-अलग कॉन्फ़िगरेशन & toolbar_Full संपत्ति पर कॉपी की स्थापना में:

var config1 = { 
    height:'400', 
    startupOutlineBlocks:true, 
    scayt_autoStartup:true, 
    toolbar_Full:[ 
     { name: 'clipboard', items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] }, 
     { name: 'editing', items : [ 'Find','Replace','-' ] }, 
     { name: 'basicstyles', items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat' ] }, 
     { name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl' ] }, 
     '/', 
     { name: 'links', items : [ 'Link','Unlink','Anchor' ] }, 
     { name: 'insert', items : [ 'Image','HorizontalRule' ] }, 
     { name: 'styles', items : [ 'Styles','Format','Font','FontSize' ] }, 
     { name: 'colors', items : [ 'TextColor','BGColor' ] }, 
     { name: 'tools', items : [ 'Maximize', 'ShowBlocks' ] }, 
     { name: 'document', items : [ 'Source' ] } 
    ] 
} 

var config2 = { 
    height:'100', 
    startupOutlineBlocks:true, 
    scayt_autoStartup:true 
}; 
config2.toolbar_Full = config1.toolbar_Full; 

$('#editor1').ckeditor(config1); 
$('#editor2').ckeditor(config2); 

वहाँ एक बेहतर तरीका है? मुझे कुछ भी याद आ रही है? this question है लेकिन उन्होंने उपयोगी होने के लिए पर्याप्त पोस्ट नहीं किया है, & this very similar question का उत्तर नहीं दिया गया है। धन्यवाद!

अद्यतन:

यह CKEditor के समय/config से निपटने मोड़ हो रहा है - config & बाद में लागू पढ़ने के लिए है न कि (मैं के बाद संपादक के डोम ढांचा स्थापित किया गया है अनुमान लगा रहा हूँ) जब संपादक पहली बार तत्काल होता है।

तो, config सेटिंग में कोई बदलाव तुरंत के बाद 1 संपादक .ckeditor साथ instantiated है बनाया() वास्तव में इसके बाद के कई मिलीसेकेंड में कुछ बिंदु पर संपादक द्वारा लगाया जाता है। मैं तर्क दूंगा कि यह सामान्य व्यवहार नहीं है, या तार्किक है।

उदाहरण के लिए, आप अपने पहले उदाहरण में अपेक्षित व्यवहार प्राप्त कर सकते हैं (पहले संपादक को तुरंत चालू करने के बाद config.height संपत्ति को ओवरराइड करना) सेटटाइमआउट() के साथ दूसरे सीकेएडिटर उदाहरण में देरी से काम करने के लिए। फ़ायरफ़ॉक्स की आवश्यकता ~ 100ms, आईई की आवश्यकता 1 एमएमएस। Wacky & गलत।

सीकेडिटर को प्रत्येक संपादक को पहली बार तत्काल चालू करने पर कॉन्फ़िगरेशन सेटिंग्स को पढ़ना चाहिए। अभी के लिए, हर किसी को उस quirk के आसपास काम करना है। कस्टम ऊंचाइयों के साथ दो संपादकों प्रारंभ करने में

Answer 1

सबसे आसान तरीका है:

$('#editor1').ckeditor({ height: 100 }); 
$('#editor2').ckeditor({ height: 200 }); 

या jQuery के बिना:

CKEDITOR.replace('editor1', { height: 100 }); 
CKEDITOR.replace('editor2', { height: 200 }); 

AFAIK यह संभव नहीं है मक्खी पर संपादक की ऊंचाई बदलने के लिए।

यदि ये विधियां आपके लिए काम नहीं कर रही थीं, तो आप और भी गलत कर रहे थे।

अद्यतन:

अपनी टिप्पणी के लिए उत्तर देना - वास्तव में अपने प्रश्न CKEditor के बारे में नहीं था, बल्कि केवल दो अलग अलग गुणों के साथ एक वस्तु साझा करने के बारे। तो अगर आप इस तरह की कोशिश कर सकते हैं:

var configShared = { 
     startupOutlineBlocks:true, 
     scayt_autoStartup:true, 
     // etc. 
    }, 
    config1 = CKEDITOR.tools.prototypedCopy(configShared), 
    config2 = CKEDITOR.tools.prototypedCopy(configShared); 
config1.height = 100; 
config2.height = 200; 

CKEDITOR.replace('editor1', config1); 
CKEDITOR.replace('editor2', config2); 

CKEDITOR.tools.prototypedCopy एक उपकरण है कि प्रोटोटाइप पारित कर एक करने के लिए सेट के साथ नई वस्तु बनाता है। इसलिए वे इन गुणों को छोड़कर सभी गुणों को साझा करते हैं जिन्हें आप बाद में ओवरराइड करते हैं।

अद्यतन 2:

यह सवाल :) में "अपडेट" खंड के लिए अद्यतन है।

सीकेडिटर के समय या बग या जो भी हो, इसमें कोई क्विर्क नहीं है - यह शुद्ध जावास्क्रिप्ट है और कैसे बीओएम/डोम और ब्राउज़र काम करते हैं और कुछ व्यावहारिक दृष्टिकोण भी करते हैं।

पहली बात - बीओएम/डीओएम का 9 0% तुल्यकालिक है, लेकिन कुछ ऐसी चीजें हैं जो नहीं हैं। इस पूरे संपादक के कारण असीमित प्रकृति है। यही कारण है कि यह इतनी सारी घटनाएं प्रदान करता है।

दूसरी बात - जेएस ऑब्जेक्ट में संदर्भ द्वारा पारित किया गया है और जैसा कि हम चाहते हैं कि सीकेडिटर बहुत जल्दी शुरू करें, हमें अनावश्यक कार्यों से बचना चाहिए। इनमें से एक कॉन्फ़िगरेशन ऑब्जेक्ट की प्रतिलिपि बना रहा है (अच्छे कारण के बिना)। इसलिए कुछ msecs को सहेजने के लिए (और एसिंक प्लगइन्स भी लोड हो रहा है) CKEditor केवल डिफ़ॉल्ट विकल्प वाले ऑब्जेक्ट पर अपने प्रोटोटाइप को सेट करके पास कॉन्फ़िगर ऑब्जेक्ट को बढ़ाता है।

संक्षेप में - मुझे पता है कि यह एक बग की तरह दिख सकता है, लेकिन यह है कि जेएस/बीओएम/डोम libs कैसे काम करते हैं। मुझे पूरा यकीन है कि कई अन्य libs 'async विधियों को एक ही मुद्दे से प्रभावित होते हैं।

Answer 2

रेनमार से ऊपर का समाधान मेरे लिए काम कर रहा है, हालांकि मैंने 1 और समाधान देने का फैसला किया जिसे मैंने पहले इस्तेमाल किया था।

यह वास्तव में सरल है, आपको केवल इतना ही पता होना चाहिए कि ckeditor लगभग एक ही आईडी के साथ प्रत्येक उदाहरण के लिए सामग्री div तत्व बनाते हैं, केवल अंतर वृद्धिशील मान है। तो यदि आपके पास 2,3,4 है .. उदाहरण केवल अंतर ही मामूली संख्या होगी। कोड यहाँ है:

CKEDITOR.on('instanceReady', function(){ 
    $('#cke_1_contents').css('height','200px'); 
}); 

इस घटना को, हर मामले आपके पास करने के लिए सक्रिय हो जाएगा तो आप वैश्विक चर बना सकते हैं और #cke_"+x+"contents में एक्स की तरह इसका इस्तेमाल कर सकते आप सभी उदाहरणों के लिए ऊंचाई सेट करना चाहते हैं, हर बार घटना सक्रिय होता है 1 के लिए एक्स बढ़ाएं, जांचें कि पंक्ति में कौन सा उदाहरण सरल है और फिर ऊंचाई सेट करें।

var x=1; 
CKEDITOR.on('instanceReady', function(){ 
    if(x==1) h='200px'; 
    else if(x==2)h='400px'; 
    else if(x==3)h='700px'; 
    $('#cke_'+x+'_contents').css('height',h); 
    x++; 
}); 

यह सबसे अच्छा समाधान नहीं है बल्कि यह काम कर रहा है, समस्या आप वास्तव में सामग्री div आकार बदलने देखते हैं।

Answer 3

इस जोड़े आप एक बार भी एक पृष्ठ

<script> 

    CKEDITOR.on('instanceCreated', function (event) { 
     var editor = event.editor, 
      element = editor.element; 

     if (element.is('h1', 'h2', 'h3') || element.getAttribute('id') == 'editorTitle') { 
      editor.on('configLoaded', function() { 
       // Remove unnecessary plugins to make the editor simpler. 
       editor.config.removePlugins = 'find,flash,' + 
        'forms,iframe,image,newpage,removeformat,' + 
        'smiley,specialchar,stylescombo,templates'; 

       // Rearrange the layout of the toolbar. 
       editor.config.toolbarGroups = [ 
        { name: 'editing', groups: ['basicstyles'] }, 
        { name: 'undo' }, 
        //{ name: 'clipboard', groups: ['selection', 'clipboard'] }, 
        { name: 'styles' }, 
        { name: 'colors' }, 
        { name: 'tools' } 
        // { name: 'about' } 
       ]; 
      }); 
     } 
    }); 

</script> 

Answer 4

में दोनों CKeditor के लिए विभिन्न उपकरण पट्टी मिल जाएगा आप अधिक से अधिक पृष्ठ के लिए ckeditor.js जोड़ेंगे, तो वह है कि समस्या हो सकती है। स्क्रिप्ट कोड प्रत्येक पृष्ठ में एक बार परिभाषित किया जाना चाहिए। <script type="text/javascript" src="Fck342/ckeditor.js"></script>

Answer 5

बस का उपयोग CKEDITOR.replaceAll();