CKEditor उदाहरण पहले से मौजूद है


99

मैं वर्तमान रूपों (AJAX के माध्यम से प्राप्त) के लिए jquery संवादों का उपयोग कर रहा हूं। कुछ रूपों में मैं textareas के लिए एक CKEditor का उपयोग कर रहा हूं। संपादक पहले लोड पर ठीक दिखाता है।

जब उपयोगकर्ता संवाद रद्द करता है, तो मैं सामग्री हटा रहा हूं ताकि बाद में अनुरोध पर उन्हें ताजा लोड किया जाए। मुद्दा यह है कि एक बार संवाद को फिर से लोड करने के बाद, सीकेडीटर दावा करता है कि संपादक पहले से मौजूद है।

uncaught exception: [CKEDITOR.editor] The instance "textarea_name" already exists.

एपीआई में मौजूदा संपादकों को नष्ट करने के लिए एक विधि शामिल है, और मैंने लोगों को यह दावा करते हुए देखा है कि यह एक समाधान है:

if (CKEDITOR.instances['textarea_name']) {
CKEDITOR.instances['textarea_name'].destroy();
}
CKEDITOR.replace('textarea_name');

यह मेरे लिए काम नहीं कर रहा है, क्योंकि मुझे इसके बजाय एक नई त्रुटि प्राप्त हुई है:

TypeError: Result of expression 'i.contentWindow' [null] is not an object.

यह त्रुटि "प्रतिस्थापित ()" के बजाय "नष्ट ()" पर होती है। क्या किसी ने इसका अनुभव किया है और एक अलग समाधान पाया है?

क्या मौजूदा संपादक को नष्ट करने और बदलने के बजाय उसे फिर से प्रस्तुत करना संभव है?

अद्यतन यहाँ एक ही समस्या से निपटने का एक और सवाल है, लेकिन उन्होंने एक डाउनलोड करने योग्य परीक्षण मामला प्रदान किया है ।

जवाबों:


101

इस कार्य के लिए आप बूलियन पैरामीटर पारित करने के लिए की जरूरत है सच जब उदाहरण नष्ट:

    var editor = CKEDITOR.instances[name];
    if (editor) { editor.destroy(true); }
    CKEDITOR.replace(name);

2
"असली" विकल्प सभी अंतर बनाता है। यह भी ध्यान देने योग्य है कि नीचे दिया गया "CKEDITOR.remove (उदाहरण)" उत्तर एक अच्छा समाधान नहीं है क्योंकि यह एक आंतरिक एपीआई है जो त्रुटियों को भी पैदा कर सकता है, यह हमेशा बेहतर है। उदाहरण के लिए प्रयोग करें ।estroy (true)
Balb Clark

धन्यवाद, यह वास्तव में मेरी मदद करता है।
अधूरा

6
धन्यवाद के गायन में शामिल होने! मुझे लगता है कि कैसे स्टैक ओवरफ्लो हमेशा एक खोज के साथ मेरी सभी समस्याओं को हल करता है।
टॉमी फोर्सस्ट्रोम जुएल

1
यह उत्तर एसओ उपयोगी है, मुझे आश्चर्य है कि यह यहां बहुत गहरा दफन है।
पेट्र वोस्ट्रेल

2
उनके द्वारा प्राप्त मतों की संख्या के आधार पर उत्तर छाँटने का एक विकल्प होना चाहिए था। इसलिए सबसे अच्छे उत्तर शीर्ष पर आते हैं।
shasi kant

28
function loadEditor(id)
{
    var instance = CKEDITOR.instances[id];
    if(instance)
    {
        CKEDITOR.remove(instance);
    }
    CKEDITOR.replace(id);
}

इससे मुझे थोड़ा दुख हुआ, लेकिन आपके समाधान से मदद मिली। धन्यवाद!
बेन शीशीरमैन

मुझे फ़ायरफ़ॉक्स में एक समान समस्या थी जिसके पृष्ठ पर CKditor के तीन उदाहरण थे, पहला प्रदर्शित नहीं हो रहा था, लेकिन अन्य दो जहाँ, मैंने उपरोक्त कोड जोड़ा और सभी टीएच संपादक अब दिखाई देते हैं
क्रेग एंगस

18
CKEDITOR.remove का उपयोग न करें क्योंकि यह केवल सरणी से तत्व को साफ करता है, लेकिन सभी DOM को स्मृति में छोड़ देता है। डॉक्स में यह कहा गया है कि यह आंतरिक उपयोग के लिए है: docs.cksource.com/ckeditor_api/symbols/CKEDITOR.html#.remove आपको madhaviaddanki के रूप में instace.destroy () के बजाय उपयोग करना चाहिए।
अल्फांसोएमल

2
उसी स्थिति में दौड़ा और जैसा कि कहा गया है, यह उत्तर गलत है। नष्ट () का उपयोग करना और वास्तविक पैरामीटर को पारित करना वही है जो अंत में मेरे लिए काम करता है, जैसा कि नीचे दिया गया है।
माथाचेव

19

मुझे भी यह समस्या थी, लेकिन मैंने इसे बहुत सरल तरीके से हल किया ...

मैं अपने jQuery स्क्रिप्ट में चयनकर्ता के रूप में वर्ग "ckeditor" का उपयोग कर रहा था, जिसके लिए मैं textareas को CKEEDitor के लिए उपयोग करना चाहता था। डिफ़ॉल्ट ckeditor JS स्क्रिप्ट इस वर्ग का उपयोग यह पहचानने के लिए भी करती है कि CKEditor को कौन से टेक्स्टारिस का उपयोग करना है।

इसका मतलब था कि मेरी jQuery स्क्रिप्ट और डिफ़ॉल्ट ckeditor स्क्रिप्ट के बीच एक संघर्ष है।

मैंने बस textarea की क्लास और मेरी jQuery स्क्रिप्ट को 'do_ckeditor' में बदल दिया (आप "ckeditor" को छोड़कर कुछ भी इस्तेमाल कर सकते हैं) और यह काम कर गया।


धन्यवाद, हाँ "ऑटो" ckeditorizing मेरे साथ भी खिलवाड़ कर रहा था। यह भी देखें stackoverflow.com/a/3631391/923817
डीटेट

11

यह मेरे लिए काम करने वाला सबसे सरल (और केवल) समाधान है:

if(CKEDITOR.instances[editorName])
   delete CKEDITOR.instances[editorName];
CKEDITOR.replace(editorName);

इस प्रविष्टि को सरणी में हटाने से यह फ़ॉर्म सुरक्षा जाँच आपके एप्लिकेशन को नष्ट करने से रोकता है।

नष्ट () और निकालें () मेरे लिए काम नहीं किया।


1
यह एकमात्र समाधान है जो मेरे साथ भी काम करता है, इसे पोस्ट करने के लिए धन्यवाद!
माइकल रॉबिन्सन

मैं काम करने के लिए नष्ट () हो गया। लेकिन न तो deleteया destroy()संपादक की पूरी तरह से सफाई। शब्दकोश और अन्य संबंधित वस्तुओं जैसी चीजें अभी भी चारों ओर दुबक जाएंगी।
आदू

मैंने Inst.destroy (सत्य) की कोशिश की, लेकिन यह मेरे लिए काम नहीं किया। लेकिन इसने मेरे लिए काम किया। क्या कोई मुझे बता सकता है, क्या इसके कोई साइडइफेक्ट्स हैं?
एलेक्स

7

शायद यह आपकी मदद करेगा - मैंने jquery का उपयोग करके कुछ ऐसा ही किया है, सिवाय इसके कि मैं अज्ञात संख्या में ckeditor ऑब्जेक्ट लोड कर रहा हूं। इस पर ठोकर खाने में मुझे थोड़ा समय लगा - यह दस्तावेज में स्पष्ट नहीं है।

function loadEditors() {
    var $editors = $("textarea.ckeditor");
    if ($editors.length) {
        $editors.each(function() {
            var editorID = $(this).attr("id");
            var instance = CKEDITOR.instances[editorID];
            if (instance) { instance.destroy(true); }
            CKEDITOR.replace(editorID);
        });
    }
}

और यहाँ मैं संपादकों से सामग्री प्राप्त करने के लिए चला रहा हूँ:

    var $editors = $("textarea.ckeditor");
    if ($editors.length) {
        $editors.each(function() {
            var instance = CKEDITOR.instances[$(this).attr("id")];
            if (instance) { $(this).val(instance.getData()); }
        });
    }

अद्यतन : मैंने सही विधि का उपयोग करने के लिए अपना उत्तर बदल दिया है - जो कि .destroy () है। .remove () का अर्थ आंतरिक है, और एक बिंदु पर अनुचित रूप से प्रलेखित किया गया था।


ऐसा लगता है कि त्रुटियों को हटा दिया गया है, लेकिन दूसरे रेंडरिंग में टेक्स्टारिया में अब 'शून्य' है और मैं अब टूलबार या टेक्स्टारिया के साथ बातचीत नहीं कर सकता। यदि मैं टूलबार बटन पर क्लिक करता हूं तो मुझे त्रुटियां मिलती हैं जैसे: "TypeError: Result of अभिव्यक्ति 'यह $। $। फ़ोकस' [अपरिभाषित] एक फ़ंक्शन नहीं है" -or- "TypeError: परिणाम का परिणाम 'this -720ment.getWindow () । $ '[अपरिभाषित] कोई वस्तु नहीं है "। आप उस फ़ंक्शन को कहाँ / कब कहते हैं? मेरे पास jquery भरी हुई सामग्री के साथ मेरी स्क्रिप्ट इनलाइन है। (मूल html के सिर में
ckeditor.js

मैं इसे सभी textareas पृष्ठ पर जोड़ दिया गया है और सामग्री से भर जाने के बाद कहता हूं।
स्कॉट

5

मेरे पास इसी तरह का मुद्दा है जहां हम ajax के माध्यम से लोड की गई सामग्री के लिए CKeditor के कई उदाहरण बना रहे थे।

CKEDITOR.remove ()

DOM को मेमोरी में रखा और सभी बाइंडिंग को नहीं हटाया।

CKEDITOR.instance [instance_id] .destroy ()

जब भी मैं ajax के नए डेटा के साथ नया उदाहरण बनाता हूं तो त्रुटि i। कॉन्टेंटविन्डो त्रुटि दें। लेकिन यह केवल तब तक था जब तक मुझे पता चल गया था कि मैं डोम को साफ करने के बाद उदाहरण को नष्ट कर रहा हूं।

नष्ट () का उपयोग करें, जबकि उदाहरण और यह DOM पृष्ठ पर मौजूद है, तो यह पूरी तरह से ठीक काम करता है।


5

अजाक्स अनुरोधों के लिए,

 for(k in CKEDITOR.instances){
    var instance = CKEDITOR.instances[k];
    instance.destroy()
 }
  CKEDITOR.replaceAll();

यह स्निप दस्तावेज़ से सभी उदाहरणों को निकालता है। फिर नए उदाहरण बनाता है।



3

i.contentWindow is nullत्रुटि तब होती है जब बुला एक संपादक उदाहरण है कि डोम में एक पाठ क्षेत्र से बंधा था नहीं रह गया है पर नष्ट लगता है।

CKEDITORY.destroyएक पैरामीटर लेता है noUpdate

APIdoc बताता है:

यदि उदाहरण DOM तत्व को प्रतिस्थापित कर रहा है, तो यह पैरामीटर संकेत करता है कि तत्व को सामग्री से अपडेट करना है या नहीं।

तो, त्रुटि से बचने के लिए, या तो DOM से textarea तत्व को हटाने से पहले कॉल को नष्ट करें, या गैर-मौजूद DOM तत्व को अपडेट करने की कोशिश से बचने के लिए destory (true) को कॉल करें।

if (CKEDITOR.instances['textarea_name']) {
   CKEDITOR.instances['textarea_name'].destroy(true);
}

(jQuery एडाप्टर के साथ संस्करण 3.6.2 का उपयोग कर)


3

इसी से मेरा काम बना है:

for(name in CKEDITOR.instances)
{
  CKEDITOR.instances[name].destroy()
}

सुनिश्चित करें कि आपका "रद्द करें" कोड कुछ इसी तरह कहता है! मेरा मुद्दा यह था कि मेरी कॉल नष्ट नहीं हो रही थी :)
ROunofF

2
CKEDITOR.instances = new Array();

मैं अपने कॉल से पहले एक उदाहरण (प्रति पृष्ठ लोड वाले) बनाने के लिए इसका उपयोग कर रहा हूं। सुनिश्चित नहीं हैं कि यह मेमोरी हैंडलिंग को कैसे प्रभावित करता है और क्या नहीं। यह तभी काम करेगा जब आप एक पेज पर सभी उदाहरणों को बदलना चाहते हैं।


1
मैंने इस पृष्ठ पर सभी समाधानों की कोशिश की ... मेरे पर्यावरण के लिए, यह केवल एक ही है जिसने काम किया है (लेकिन मेरे ie9 केवल FF में सही काम नहीं किया है ...) यह निश्चित नहीं है कि दूसरों ने 1 घंटे के बाद क्यों नहीं किया परीक्षण और त्रुटि, यह एकमात्र समाधान है जो मेरे लिए काम करता है। इसे पोस्ट करने के लिए धन्यवाद।
रॉनडॉग

2

मैंने उपरोक्त सभी कोड के आधार पर अपना समाधान तैयार किया है।

      $("textarea.ckeditor")
      .each(function () {

                var editorId = $(this).attr("id");

                try {    
                    var instance = CKEDITOR.instances[editorId];
                    if (instance) { instance.destroy(true); }

                }
                catch(e) {}
                finally {
                    CKEDITOR.replace(editorId);
                }
            });

यह मेरे लिए पूरी तरह से काम करता है।

AJAX अनुरोध के बाद कभी-कभी गलत DOM संरचना होती है। उदाहरण के लिए:

<div id="result">
   <div id="result>
   //CONTENT
   </div>
</div>

यह भी समस्या का कारण होगा, और ckEditor काम नहीं करेगा। इसलिए सुनिश्चित करें कि आपके पास डोम संरचना सही है।


2

मुझे उदाहरणों के साथ एक ही समस्या थी, मैं हर जगह देख रहा था और आखिरकार यह कार्यान्वयन मेरे लिए काम करता है:



    //set my instance id on a variable

    myinstance = CKEDITOR.instances['info'];

    //check if my instance already exist

    if (myinstance) { 
        CKEDITOR.remove(info)
    }

    //call ckeditor again

    $('#info').ckeditor({
        toolbar: 'Basic',
        entities: false,
        basicEntities: false
    });

2

आप ckeditor की विधि को हटाकर किसी भी ckeditor उदाहरण को निकाल सकते हैं। उदाहरण idarea का नाम या नाम होगा।

if (CKEDITOR.instances[instance_name]) {
    CKEDITOR.remove(CKEDITOR.instances[instance_name]);
}

1

दरअसल, आपके कोड से ".ckeditor" क्लास को हटाने से समस्या हल हो जाती है। हममें से अधिकांश ने ckeditor के प्रलेखन से jQuery के एकीकरण उदाहरण का अनुसरण किया:

$('.jquery_ckeditor')
.ckeditor( function() { /* callback code */ }, { skin : 'office2003' } );

और सोचा "... शायद मैं सिर्फ छुटकारा पा सकता हूं या '.jquery_' भाग"।

मैं अपना समय बर्बाद कर रहा हूं कॉलबैक फ़ंक्शन को टाल रहा हूं (क्योंकि {skin: 'office2003'} वास्तव में काम किया है), जबकि समस्या कहीं और से आ रही थी।

मुझे लगता है कि दस्तावेज़ीकरण में उल्लेख किया जाना चाहिए कि वर्ग नाम के रूप में "ckeditor" का उपयोग अनुशंसित नहीं है, क्योंकि यह एक आरक्षित कीवर्ड है।

चीयर्स।


1

मैंने वह सीखा

CKEDITOR.instances [editorName] हटाएं;

अपने आप में, वास्तव में उदाहरण को हटा दिया। अन्य सभी विधियाँ जो मैंने पढ़ी और देखी हैं, जिनमें अपने उपयोगकर्ताओं से स्टैकओवरफ़्लो में यहाँ क्या पाया गया था, मेरे लिए काम नहीं किया।

मेरी स्थिति में, एक अजाक्स कॉल का उपयोग करते हुए im को 's' के चारों ओर लिपटी हुई सामग्री की एक प्रति खींचने के लिए। समस्या इसलिए होती है क्योंकि मैं "एडिट इस डॉक्यूमेंट" लिंक को बाइंड करने के लिए jQuery .live इवेंट का उपयोग कर रहा हूं और फिर ajax लोड की सफलता के बाद ckeditor इंस्टेंस को लागू कर रहा हूं। इसका मतलब यह है कि जब मैं किसी अन्य लिंक को किसी अन्य .live ईवेंट के साथ लिंक पर क्लिक करता हूं, तो मुझे सामग्री विंडो को साफ़ करने के अपने कार्य के रूप में CKEDITOR.instances [EditorName] का उपयोग करना होगा (फिर फॉर्म को पकड़े हुए), फिर से सामग्री प्राप्त करना। डेटाबेस या अन्य संसाधन में।


1

मैं jQuery के संवाद के साथ एक ही समस्या थी

यदि आप पिछले डेटा को हटाना चाहते हैं तो उदाहरण को नष्ट क्यों करें?

function clearEditor(id)
{
  var instance = CKEDITOR.instances[id];
  if(instance)
  {
    instance.setData( '' );
  }
}

1

मैंने नष्ट होने / बदलने के बजाय सभी उदाहरणों का नाम बदलने का विकल्प चुना - चूंकि कभी-कभी AJAX लोडेड उदाहरण वास्तव में पेज के कोर पर एक को प्रतिस्थापित नहीं करता है ... रैम में अधिक रहता है, लेकिन इस तरह कम संघर्ष।

    if (CKEDITOR && CKEDITOR.instances) {
        for (var oldName in CKEDITOR.instances) {
            var newName = "ajax"+oldName;
            CKEDITOR.instances[newName] = CKEDITOR.instances[oldName];
            CKEDITOR.instances[newName].name = newName;
            delete CKEDITOR.instances[oldName];
        }
    }

1

मैं उस स्थिति में हूं जहां मुझे उस स्पॉन संवादों को नियंत्रित करना है, उनमें से प्रत्येक को इन संवादों के अंदर एक cededitor एम्बेडेड की आवश्यकता है। और यह सिर्फ इतना होता है कि पाठ क्षेत्र एक ही आईडी साझा करते हैं। (आम तौर पर यह बहुत बुरा अभ्यास है, लेकिन मेरे पास 2 jGGrids हैं, असाइन की गई वस्तुओं में से एक और बिना किसी अन्य आइटम के।) वे लगभग समान कॉन्फ़िगरेशन साझा करते हैं। इस प्रकार, मैं दोनों को कॉन्फ़िगर करने के लिए सामान्य कोड का उपयोग कर रहा हूं।

इसलिए, जब मैं एक संवाद लोड करता हूं, पंक्तियों को जोड़ने के लिए, या उन्हें संपादित करने के लिए, या तो jqGrid से; मुझे सभी पाठ्यसामग्री में CKEDITOR के सभी उदाहरणों को हटाना होगा।

$('textarea').each(function()
{
    try 
    {
        if(CKEDITOR.instances[$(this)[0].id] != null)
        {
            CKEDITOR.instances[$(this)[0].id].destroy();
        }
    }
    catch(e)
    {

    }
});

यह सभी टेक्स्टारस पर लूप करेगा, और यदि CKEDITOR उदाहरण है, तो इसे नष्ट कर दें।

वैकल्पिक रूप से यदि आप शुद्ध jQuery का उपयोग करते हैं:

$('textarea').each(function()
{
    try 
    {
        $(this).ckeditorGet().destroy();
    }
    catch(e)
    {

    }
});

1

निकालें class="ckeditor", इससे ckeditor आरंभीकरण शुरू हो सकता है


0

मुझे वही समस्या थी जहाँ मुझे एक अशक्त संदर्भ अपवाद मिल रहा था और "नल" शब्द को संपादक में प्रदर्शित किया जाएगा। मैंने संपादक को अपग्रेड करने के लिए 3.4.1 का उपयोग किया, जिसमें कोई फायदा नहीं हुआ।

मैं स्रोत को संपादित करने के लिए समाप्त हो गया। _Source \ plugins \ wysiwygarea \ plugin.js में लगभग 416 से 426 की लाइन पर, इस तरह का एक स्निपेट है:

iframe = CKEDITOR.dom.element.createFromHtml( '&lt;iframe' + ... + '></iframe>' );

FF में कम से कम, iframe को उस समय तक पूरी तरह से तत्काल नहीं किया जाता है जब तक इसकी आवश्यकता होती है। मैंने एक सेटटाइम फ़ंक्शन के साथ उस पंक्ति के बाद बाकी फ़ंक्शन को घेर लिया:

iframe = CKEDITOR.dom.element.createFromHtml( '<iframe' + ... + '></iframe>' );
setTimeout(function()
{ 
    // Running inside of Firefox chrome the load event doesn't bubble like in a normal page (#5689)
    ...
}, 1000);

};

// The script that launches the bootstrap logic on 'domReady', so the document
...

पाठ अब लगातार मोडल संवादों में प्रस्तुत करता है।


0

डायनामिक (अजाक्स) फॉर्म (पेज रिफ्रेश के बिना) के लोडिंग का समर्थन करने के लिए, जिसमें एक ही (समान फॉर्म को फिर से बुलाया जाता है) के साथ टेक्स्टारिस होते हैं या अलग-अलग आईडी के (पहले अनलोड किए गए फॉर्म) और उन्हें CKEditor तत्वों में परिवर्तित करते हैं जो मैंने किया था (JQuery का उपयोग करके) अनुकूलक):

पृष्ठ के बाद हर अजाक्स कॉल समाप्त हो गया है जो एक textarea को बदलने के लिए बचाता है, मैं निम्नलिखित फ़ंक्शन के लिए एक कॉल करता हूं:

setupCKeditor()

यह इस तरह दिखता है (आरटीई के वर्ग = "yourCKClass" में परिवर्तित होने के लिए यह आपके टेक्स्टरी को मानता है ):

    /* Turns textAreas into TinyMCE Rich Text Editors where
 * class: tinymce applied to textarea.
 */
function setupCKeditor(){

    // define editor configuration      
    var config = {skin : 'kama'};

    // Remove and recreate any existing CKEditor instances
    var count = 0;
    if (CKEDITOR.instances !== 'undefined') {
        for(var i in CKEDITOR.instances) {

            var oEditor   = CKEDITOR.instances[i];
            var editorName = oEditor.name;

             // Get the editor data.
            var data = $('#'+editorName).val();

            // Check if current instance in loop is the same as the textarea on current page
            if ($('textarea.yourCKClass').attr('id') == editorName) {
                if(CKEDITOR.instances[editorName]) {

                    // delete and recreate the editor
                    delete CKEDITOR.instances[editorName];
                    $('#'+editorName).ckeditor(function() { },config);
                    count++;

                }
            }   


        }
    }

    // If no editor's exist in the DOM, create any that are needed.             
    if (count == 0){

        $('textarea.yourCKClass').each( function(index) {

                var editorName = $(this).attr('id');
                $('#'+editorName).ckeditor(function() { $('#'+editorName).val(data); },config);

            });

    }


}

मुझे यह उल्लेख करना चाहिए कि रेखा:

$('#'+editorName).ckeditor(function() { $('#'+editorName).val(data); },config);

बस (और) होना चाहिए:

$('#'+editorName).ckeditor(function() { },config);

हालाँकि मैंने पाया कि संपादक अक्सर लोड करने के बाद एक दूसरे के लिए सही सामग्री दिखाएगा और उन्होंने वांछित सामग्री के संपादक को खाली कर दिया। तो कॉलबैक कोड के साथ लाइन CKEditor सामग्री को मूल textarea सामग्री के समान होने के लिए मजबूर करती है। उपयोग किए जाने पर एक झिलमिलाहट का कारण बनता है। यदि आप इसका उपयोग करने से बच सकते हैं, तो ऐसा करें ..


0

मुझे जैकबार्ग जैसी ही समस्या थी। मैं jquery के संवादों में डायनामिक फॉर्म लोडिंग का उपयोग कर रहा था, फिर विभिन्न विगेट्स (डेटककर, सीकेडिटर आदि ...) संलग्न कर रहा था। और मैंने उपरोक्त सभी समाधानों की कोशिश की, उनमें से किसी ने भी मेरे लिए काम नहीं किया।

किसी कारण से ckeditor ने केवल पहली बार जब मैंने फॉर्म भरा था, तो दूसरी बार मुझे बिल्कुल वही त्रुटि संदेश मिला, जो jackboberg ने किया था।

मैंने अपने कोड का विश्लेषण किया है और पता लगाया है कि यदि आप "मध्य-हवा" में ckeditor संलग्न करते हैं, जबकि फॉर्म सामग्री अभी भी संवाद में नहीं रखी गई है, तो ckeditor अपने बाइंडिंग को ठीक से संलग्न नहीं करेगा। चूँकि ckeditor "mid-air" में संलग्न है, दूसरी बार जब आप इसे "mid-air" में संलग्न करते हैं ... poof ... एक त्रुटि डाली जाती है क्योंकि पहली आवृत्ति को DOM से ठीक से नहीं निकाला गया था।

यह मेरा कोड था जिसने त्रुटि को रोक दिया:

var $content = $(r.content); // jQuery can create DOM nodes from html text gotten from <xhr response> - so called "mid-air" DOM creation
$('.rte-field',$content).ckeditor(function(){});
$content.dialog();

यह वह फिक्स है जिसने काम किया:

var $content = $(r.content).dialog(); // first create dialog
$('.rte-field',$content).ckeditor(function(){}); // then attach ckeditor widget

0

मैं उसी सटीक चीज़ में भाग गया और समस्या यह थी कि वर्डकाउंट प्लगइन को प्रारंभ करने में बहुत लंबा समय लग रहा था। 30+ सेकंड। उपयोगकर्ता ckeditor को प्रदर्शित करने वाले दृश्य में क्लिक करेगा, फिर रद्द कर देगा, जिससे aax में एक नया पृष्ठ लोड हो जाएगा। प्लगइन शिकायत कर रहा था क्योंकि iframe या जो भी contentWindow इंगित कर रहा है वह अब उस समय तक दिखाई नहीं दे रहा था जब वह खुद को contentWindow में जोड़ने के लिए तैयार था। आप इसे अपने दृश्य में क्लिक करके सत्यापित कर सकते हैं और फिर संपादक के निचले दाएं भाग में वर्ड काउंट दिखने की प्रतीक्षा कर रहे हैं। यदि आप अभी रद्द करते हैं, तो आपको कोई समस्या नहीं होगी। यदि आप इसके लिए इंतजार नहीं करते हैं, तो आपको i.contentWindow शून्य त्रुटि मिलेगी। इसे ठीक करने के लिए, बस प्लगइन को स्क्रैप करें:

if (CKEDITOR.instances['textarea_name']) 
{
   CKEDITOR.instances['textarea_name'].destroy();
}
CKEDITOR.replace('textarea_name', { removePlugins: "wordcount" } );

यदि आपको एक शब्द काउंटर की आवश्यकता है, तो एक फ़ंक्शन के साथ संपादक पर पेस्ट और कीप घटनाओं के लिए पंजीकरण करें जो शब्दों को गिनता है।


0

Jquery "एडेप्टर" का उपयोग करने वालों और परेशानी (जैसे मैं था) के लिए, सुपर हैकिश के रूप में अभी तक काम करने वाले समाधान को इस तरह करना है:

// content editor plugin
(function($){
    $.fn.contentEditor = function( params ) {
        var xParams = $.extend({}, $.fn.contentEditor.defaultParams, params);
        return this.each( function() {   
            var $editor = $(this);
            var $params = $.extend({}, xParams, $editor.data());

            // if identifier is set, detect type based on identifier in $editor
            if( $params.identifier.type ) {
                $params.type = $editor.find($params.identifier.type).val();
            }

            $editor.data('type', $params.type);

            // edit functionality
            editButton = $('<button>Edit Content</button>').on('click',function(){
                // content container
                var $cc = $('#' + $editor.data('type'));

                // editor window
                var $ew = $('<form class="editorWindow" />');
                $ew.appendTo('body');

                // editor content
                $ec = $('<textarea name="editorContent" />').val($cc.html());
                $ec.appendTo($ew);
                $ec.ckeditor();


                //$ec.ckeditorGet().setMode('source');


                $ew.dialog({
                    "autoOpen": true,
                    "modal": true,
                    "draggable": false,
                    "resizable": false,
                    "width": 850,
                    "height": 'auto',
                    "title": "Content Editor",
                    "buttons": { 
                        'Save': function() {                            
                            $cc.html( $ec.val() );
                            $ec.ckeditorGet().destroy(); 
                            $ew.remove();
                        },
                        'Cancel / Close': function() { 

                            $ec.ckeditorGet().destroy();                        
                            $ew.remove();
                        }
                    },
                    'close': function() {
                        $ec.ckeditorGet().destroy(); 
                    },
                    'open': function() {
                        $ew.find('a.cke_button_source').click();

                        setTimeout(function(){
                            $ew.find('a.cke_button_source.cke_on').click();
                        }, 500);
                    }
                });

                return false;
            });

            editButton.appendTo( $editor );

        });
    }

    // set default option values
    $.fn.contentEditor.defaultParams = {
        'identifier': {
            'type': 'input[name="type"]'
        }
    };   

})(jQuery);   

$(function(){

    $('form.contentEditor').contentEditor();

});

इस भाग के प्रमुख बिंदु:

                'open': function() {
                    $ew.find('a.cke_button_source').click();

                    setTimeout(function(){
                        $ew.find('a.cke_button_source.cke_on').click();
                    }, 500);
                }

अगली बार जब आप संवाद खोलते हैं तो यह संपादक पाठ के साथ समस्या को ठीक करता है। मुझे लगता है कि यह बहुत हैकिश है, लेकिन यह देखते हुए कि इनमें से अधिकांश का उपयोग व्यवस्थापक उपकरणों के लिए किया जा रहा है, मुझे नहीं लगता कि यह एक बड़ी चिंता है जितना सामान्य रूप से होगा .. और यह काम करता है, इसलिए उम्मीद है कि यह किसी को बचाएगा। समय ;)


0

यह jquery .load () एपी और सीकेडिटर के लिए पूरी तरह से काम करने वाला कोड है, मेरे मामले में मैं कुछ jquery प्रभावों के साथ ckeditor को div में एक पेज लोड कर रहा हूं। मुझे आशा है कि यह आपकी मदद करेगा।

 $(function() {
            runEffect = function(fileload,lessonid,act) {
            var selectedEffect = 'drop';
            var options = {};
            $( "#effect" ).effect( selectedEffect, options, 200, callback(fileload,lessonid,act) );
        };
        function callback(fileload,lessonid,act) {
            setTimeout(function() {//load the page in effect div
                $( "#effect" ).load(fileload,{lessonid:lessonid,act:act});
                 $("#effect").show( "drop", 
                          {direction: "right"}, 200 );
                $("#effect").ajaxComplete(function(event, XMLHttpRequest, ajaxOptions) {
                    loadCKeditor(); //call the function after loading page
                });
            }, 100 );   
        };

        function loadCKeditor()
        {//you need to destroy  the instance if already exist
            if (CKEDITOR.instances['introduction']) 
            {
                CKEDITOR.instances['introduction'].destroy();
            }
            CKEDITOR.replace('introduction').getSelection().getSelectedText();
        }
    });

===================== button for call the function ================================

<input type="button" name="button" id="button" onclick="runEffect('lesson.php','','add')" >

0

यह बहुत आसान है। मेरे मामले में, मैंने नीचे jquery विधि चलाई जो पृष्ठ लोड के दौरान ckeditor उदाहरणों को नष्ट कर देगा। इसने चाल चली और मुद्दे को सुलझाया -

JQuery विधि -

function resetCkEditorsOnLoad(){

    for(var i in CKEDITOR.instances) {
        editor = CKEDITOR.instances[i];
            editor.destroy();
            editor = null;
    }
}

$(function() {

            $(".form-button").button();
    $(".button").button();

    resetCkEditorsOnLoad(); // CALLING THE METHOD DURING THE PAGE LOAD

            .... blah.. blah.. blah.... // REST OF YOUR BUSINESS LOGIC GOES HERE

       });

बस। मुझे उम्मीद है इससे आपको मदद मिली होगी।

चियर्स, सिरीश।


0

यह कार्य CKEditor संस्करण 4.4.5 में मेरे लिए काम करता है, इसमें कोई मेमोरी लीक नहीं है

 function CKEditor_Render(CkEditor_id) {
        var instance = CKEDITOR.instances[CkEditor_id];
        if (CKEDITOR.instances.instance) {
            CKEDITOR.instances.instance.destroy();
        }
        CKEDITOR.replace(CkEditor_id);
    }

// इस फ़ंक्शन को नीचे के रूप में कॉल करें

var id = 'ckeditor'; // Id of your textarea

CKEditor_Render(id);

0

सीकेडिटर 4.2.1

यहाँ बहुत से उत्तर हैं लेकिन मेरे लिए मुझे कुछ और चाहिए था (थोड़ा गंदा भी अगर कोई सुधार कर सकता है तो कृपया)। मेरे लिए MODALs जहां मेरा मुद्दा है।

मैं फाउंडेशन का उपयोग करते हुए CKEditor को एक मोडल में प्रस्तुत कर रहा था। आदर्श रूप से मैंने समापन पर संपादक को नष्ट कर दिया होगा, हालांकि मैं फाउंडेशन के साथ गड़बड़ नहीं करना चाहता था।

मैंने डिलीट को कॉल किया, मैंने हटाने की कोशिश की और एक और तरीका है लेकिन यह वही था जो मैंने आखिर में तय किया।

मैं DIVs नहीं आबाद करने के लिए textarea का उपयोग कर रहा था।

मेरा समाधान

//hard code the DIV removal (due to duplication of CKeditors on page however they didn't work)

    $("#cke_myckeditorname").remove();


     if (CKEDITOR.instances['myckeditorname']) {
                delete CKEDITOR.instances['myckeditorname'];
                CKEDITOR.replace('myckeditorname', GetCKEditorSettings());
            } else {
                CKEDITOR.replace('myckeditorname', GetCKEditorSettings());
            }

यह मेरी विशिष्ट प्रारूपण को वापस करने की मेरी विधि थी, जो आप नहीं चाहते होंगे।

    function GetCKEditorSettings()
    {
       return {
                    linkShowAdvancedTab: false,
                    linkShowTargetTab: false,
                    removePlugins: 'elementspath,magicline',
                    extraAllowedContent: 'hr blockquote div',
                    fontSize_sizes: 'small/8px;normal/12px;large/16px;larger/24px;huge/36px;',
                    toolbar: [
                        ['FontSize'],
                        ['Bold', 'Italic', 'Underline', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink'],
                        ['Smiley']
                    ]
                };
    }

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.