setRead उदाहरण पर कॉल करते समय त्रुटि का कारण बनता है CKEditor

Question

की रीडी, उदाहरण के पूर्ण होने के बाद मैं अपने सीकेएडिटर उदाहरण को "पढ़ने के लिए" सेट करने की कोशिश कर रहा हूं लेकिन मुझे जावास्क्रिप्ट त्रुटि मिल रही है: Cannot call method 'setReadOnly' of null। जब मैं इसमें खोदता हूं, तो editor.setReadOnly विधि के भीतर, ckeditor.js में त्रुटि इस पंक्ति से आ रही है: this.editable().setReadOnly(a); इसका मतलब है कि संपादक मौजूद है, लेकिन editable विधि/विशेषता (CKEditor उदाहरण पर) नहीं है।

नीचे मेरा कोड है, और मैं इसे थोड़ा समझाऊंगा। मेरा ऐप जीडब्ल्यूटी और बैकबोन का संयोजन है। सीकेडिटर स्वयं बैकबोन कोड द्वारा बनाया गया है लेकिन मूल तत्व जीडब्ल्यूटी में है, इसलिए मैं setEnabled एक्शन शुरू करता हूं।

private native void setEnabledOnLoad(boolean enabled, String id) /*-{ 
    CKEDITOR.on("instanceReady", function(evt) { 
    if(evt.editor.name === id) { 
     Namespace.trigger(Namespace.Events.SET_ENABLED, enabled); 
    } 
    }); 
}-*/; 

setEnabled: function(enabled) { 
    this.editor.setReadOnly(!enabled); 
    if(enabled){ 
    this.editor.focusManager.focus(); 
    } else { 
    this.editor.focusManager.blur(); 
    } 
} 

बैकबोन वर्ग कि setEnabled चलाता है Namespace.Events.SET_ENABLED के लिए एक श्रोता है।

क्या कोई और सीकेडिटर घटना है जिसे मुझे सुनना चाहिए? editable पर instanceReady ईवेंट प्रतीत नहीं होता है। मैं क्या खो रहा हूँ?

संपादित
this.editor इस तरह रीढ़ वर्ग render समारोह में बन जाता है:

this.editor = CKEDITOR.replace(this.$(this.id)[0], config); 

कारण मैं instanceReady श्रोता सही होने के बाद यह बनाया गया है समारोह setEnabledOnLoad में कहा जाता है क्योंकि न जोड़ें उदाहरण से पहले जीडब्ल्यूटी पूरी तरह से शुरू किया गया है। यह कोड दो स्थानों पर होने का नतीजा है। जीडब्ल्यूटी ने कहा है, "ठीक है, उदाहरण बनाएं" लेकिन बैकबोन उस समय तक समाप्त नहीं हुआ है जब जीडब्ल्यूटी कोड की अगली पंक्ति में जाता है और इसे सक्षम/अक्षम करना चाहता है।

Answer 1

आप instanceReady घटना के लिए इस तरह से सदस्यता लेने की कोशिश कर सकते:

CKEDITOR.instances.editor.on("instanceReady", onInstanceReadyHandler) 

हालांकि, editor उदाहरण पहले से ही तो द्वारा बनाया गया है चाहिए (निरीक्षण डीबगर में CKEDITOR.instances)।

मैं editable और editor के बीच के अंतर के बारे में थोड़ा उलझन में हूं। क्या आप अपने कोड के टुकड़े दिखा सकते हैं जहां this.editor और this.editable असाइन किया गया है?

[संपादित] मुझे लगता है कि मैं देख रहा हूं कि क्या हो रहा है। CKEDITOR एक वैश्विक वस्तु है, आप इसे इस श्रेणी के बारे में सोच सकते हैं जिसमें सभी CKEDITOR उदाहरण हैं। CKEDITOR.on के साथ ईवेंट को संभालने का प्रयास सही नहीं है, आपको इसे एक विशिष्ट उदाहरण (जैसे मैंने ऊपर दिखाया है) पर करने की आवश्यकता है। मुझे लगता है, "संपादक" आपके मूल तत्व की आईडी है जिसे आप CKEDITOR उदाहरण संलग्न करना चाहते हैं (अगर मैं गलत हूं तो कृपया मुझे सही करें)। मैं बैकबोन से परिचित नहीं हूँ, लेकिन आम तौर पर यह replace साथ किया जाता है:

var editorInstance = CKEDITOR.replace("editor", { on: { 
    instanceReady: function(ev) { alert("editor is ready!"); }}}); 

यहाँ हम editor पेरेंट तत्व को CKeditor का एक नया उदाहरण देते हैं और एक ही समय में instanceReady घटना की सदस्यता लें। लौटाई गई वस्तु editorInstancesetReadOnly सहित सभी APIs प्रदान करनी चाहिए। आप मूल तत्व आईडी, यानी CKEDITOR.instances.editor का उपयोग कर वैश्विक CKEDITOR ऑब्जेक्ट के माध्यम से इसे भी एक्सेस कर सकते हैं।दूसरी ओर, editable बल्कि एक सेवा वस्तु editor पर उपलब्ध है। मैं किसी भी विशिष्ट मामले के बारे में नहीं सोच सकता जहां आपको इसे सीधे उपयोग करने की आवश्यकता हो सकती है।

Answer 2

दो साल बाद, लेकिन मेरा समाधान यहां है। शायद किसी और को यह उपयोगी लगेगा। ऊपर बताए अनुसार, संपादन योग्य() फ़ंक्शन पूरी तरह से स्थापित होने से पहले ईवेंट को ट्रिगर किया गया है, और इसलिए एक समाधान यह है कि इसे पढ़ने के लिए इसे सेट करने से पहले इसे पूरा करने के लिए बस प्रतीक्षा करें। यह करने के लिए यह एक बदसूरत तरीका हो सकता है, लेकिन यह काम करता है।

 //Delayed execution - ckeditor must be properly initialized before setting readonly 
     var retryCount = 0; 
     var delayedSetReadOnly = function() { 
      if (CKEDITOR.instances['bodyEditor'].editable() == undefined && retryCount++ < 10) { 
       setTimeout(delayedSetReadOnly, retryCount * 100); //Wait a while longer each iteration 
      } else { 
       CKEDITOR.instances['bodyEditor'].setReadOnly(); 
      } 
     }; 
     setTimeout(delayedSetReadOnly, 50); 

Answer 3

मैं अपने समाधान के साथ इसे कभी अपडेट करने के लिए क्षमा चाहता हूं। मुझे सीडब्ल्यूडीटर व्यवहार से जीडब्ल्यूटी समारोह को आगे बढ़ाने की जरूरत थी। इसलिए, मैंने GWT 'setEnabled' में एक फ़ंक्शन जोड़ा जिसे मूल ऑब्जेक्ट से कहा जाता है जब वह CKEditor ऑब्जेक्ट की सक्षम स्थिति को अपडेट करना चाहता है।

public void setEnabled(boolean enabled) { 
    this.enabled = enabled; 
    toggleCKEditorEnabled(enabled);  
}  

तब समारोह 'setEnabledOnLoad' 'toggleCKEditorEnabled' किए जाने की जो enabled मूल्य के साथ SET_ENABLED ईवेंट ट्रिगर ऊपर संदर्भित बदल दिया है।

श्रोताओं को सीकेएडिटर के विशिष्ट उदाहरण में जोड़ने के बजाय, मैंने बैकबोन MessageEntryView क्लास में जोड़ा जो सीकेएडिटर उदाहरण का कंटेनर है। MessageEntryView की initialize समारोह में, मैं इस लाइन जोड़ा

Namespace.on(Namespace.Events.SET_ENABLED, this.setEnabled); 

यह केवल काम करता है क्योंकि मैं CKEditor का एक उदाहरण किसी भी समय स्क्रीन पर भरी हुई है। इस समस्या और इसके समाधान ने हमें एक समय में पृष्ठ पर अधिक सीकेएडिटर उदाहरण जोड़ने में सक्षम होने से रोक दिया, जो कि हमारे पूरे क्लाइंट को बैकबोन के साथ आगे बढ़ने और बदलने से पहले हमने चर्चा की थी।