L'istanza di CKEditor esiste già

Sto usando le finestre di dialogo jquery per presentare i moduli (recuperati tramite AJAX). Su alcuni moduli sto usando un CKEditor per le textareas. L'editor viene visualizzato correttamente al primo caricamento.

Quando l'utente annulla la finestra di dialogo, rimuovo i contenuti in modo che vengano caricati nuovamente in una richiesta successiva. Il problema è che, una volta ricaricata la finestra di dialogo, CKEditor afferma che l'editor esiste già.

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

L'API include un metodo per distruggere gli editor esistenti e ho visto persone affermare che questa è una soluzione:

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

Questo non funziona per me, poiché ricevo invece un nuovo errore:

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

Questo errore sembra verificarsi su "destroy ()" piuttosto che su "replace ()". Qualcuno l'ha sperimentato e ha trovato una soluzione diversa?

È possibile "ri-renderizzare" l'editor esistente, invece di distruggerlo e sostituirlo?

AGGIORNATO Ecco un'altra domanda relativa allo stesso problema, ma ha fornito un test case scaricabile .

Affinché funzioni, è necessario passare il parametro booleano true durante la distruzione dell'istanza:

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

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

Ho avuto anche questo problema, ma l'ho risolto in modo molto più semplice ...

Stavo usando la classe "ckeditor" nel mio script jQuery come selettore per le aree di testo che volevo usare per CKEditor. Lo script JS di ckeditor predefinito utilizza questa classe anche per identificare quali aree di testo utilizzare per CKEditor.

Ciò significava che esiste un conflitto tra il mio script jQuery e lo script ckeditor predefinito.

Ho semplicemente cambiato la classe della textarea e il mio script jQuery in "do_ckeditor" (puoi usare qualsiasi cosa tranne "ckeditor") e ha funzionato.

Questa è la soluzione più semplice (e unica) che ha funzionato per me:

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

L'eliminazione di questa voce dall'array impedisce a questo controllo di sicurezza del modulo di distruggere l'applicazione.

distruggere () e rimuovere () non ha funzionato per me.

Forse questo ti aiuterà: ho fatto qualcosa di simile usando jquery, tranne che sto caricando un numero sconosciuto di oggetti ckeditor. Mi ci è voluto un po 'per capirlo - non è chiaro nella documentazione.

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

Ed ecco cosa corro per ottenere il contenuto dagli editori:

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

AGGIORNAMENTO : ho cambiato la mia risposta per utilizzare il metodo corretto, che è .destroy (). .remove () è pensato per essere interno e ad un certo punto è stato documentato in modo improprio.

Ho avuto un problema simile in cui stavamo creando diverse istanze di CKeditor per il contenuto caricato tramite ajax.

CKEDITOR.remove ()

Ha mantenuto il DOM in memoria e non ha rimosso tutti i collegamenti.

CKEDITOR.instance [instance_id] .destroy ()

Ha dato l'errore i.contentWindow ogni volta che creo una nuova istanza con nuovi dati da ajax. Ma questo solo fino a quando non ho capito che stavo distruggendo l'istanza dopo aver cancellato il DOM.

Usa destroy () mentre l'istanza e il suo DOM sono presenti sulla pagina, quindi funziona perfettamente.

Per richieste ajax,

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

questo snippato rimuove tutte le istanze dal documento. Quindi crea nuove istanze.

var e= CKEDITOR.instances['sample'];
e.destroy();
e= null;

L' i.contentWindow is nullerrore sembra verificarsi durante la chiamata alla distruzione su un'istanza dell'editor che era legata a un'area di testo non più nel DOM.

CKEDITORY.destroyaccetta un parametro noUpdate.

L'APIdoc afferma:

Se l'istanza sta sostituendo un elemento DOM, questo parametro indica se aggiornare o meno l'elemento con il contenuto dell'istanza.

Quindi, per evitare l'errore, chiama destroy prima di rimuovere l'elemento textarea dal DOM o chiama destory (true) per evitare di provare ad aggiornare l'elemento DOM inesistente.

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

(utilizzando la versione 3.6.2 con l'adattatore jQuery)

Questo è ciò che ha funzionato per me:

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

CKEDITOR.instances = new Array();

Lo sto usando prima delle mie chiamate per creare un'istanza (quelle per caricamento pagina). Non sono sicuro di come questo influenzi la gestione della memoria e cosa no. Funzionerebbe solo se si desidera sostituire tutte le istanze su una pagina.

Ho preparato la mia soluzione basata su tutti i codici di cui sopra.

      $("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);
                }
            });

Funziona perfettamente per me.

A volte dopo la richiesta AJAX c'è una struttura DOM sbagliata. Per esempio:

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

Anche questo causerà problemi e ckEditor non funzionerà. Quindi assicurati di avere una struttura DOM corretta.

ho avuto lo stesso problema con le istanze, stavo cercando ovunque e finalmente questa implementazione funziona per me:

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

Puoi rimuovere qualsiasi istanza di ckeditor tramite il metodo remove di ckeditor. L'istanza sarà l'id o il nome dell'area di testo.

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

In effetti, la rimozione della classe ".ckeditor" dal codice risolve il problema. La maggior parte di noi ha seguito l'esempio di integrazione di jQuery dalla documentazione del ckeditor:

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

e ho pensato "... forse posso semplicemente sbarazzarmi o la parte '.jquery_'".

Ho sprecato il mio tempo a modificare la funzione di callback (perché {skin: 'office2003'} funzionava effettivamente), mentre il problema proveniva da altrove.

Penso che la documentazione dovrebbe menzionare che l'uso di "ckeditor" come nome di una classe non è raccomandato, perché è una parola chiave riservata.

Saluti.

ho imparato che

eliminare CKEDITOR.instances [editorName];

da solo, ha effettivamente rimosso l'istanza. TUTTI gli altri metodi che ho letto e visto, incluso ciò che è stato trovato qui su stackoverflow dai suoi utenti, non ha funzionato per me.

Nella mia situazione, sto usando una chiamata ajax per estrarre una copia del contenuto avvolto attorno a e. Il problema è dovuto al fatto che sto utilizzando un evento jQuery .live per associare un collegamento "Modifica questo documento" e quindi applicare l'istanza di ckeditor dopo il successo del caricamento ajax. Ciò significa che quando faccio clic su un altro collegamento un collegamento con un altro evento .live, devo utilizzare l'eliminazione CKEDITOR.instances [editorName] come parte del mio compito di cancellare la finestra del contenuto (tenendo il modulo), quindi recuperare il contenuto trattenuto nel database o in un'altra risorsa.

Ho lo stesso problema con una finestra di dialogo jQuery.

Perché distruggere l'istanza se si desidera solo rimuovere i dati precedenti?

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

Ho scelto di rinominare tutte le istanze invece di distruggere / sostituire - poiché a volte l'istanza caricata AJAX non sostituisce realmente quella al centro della pagina ... mantiene di più nella RAM, ma in questo modo meno conflitti.

    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];
        }
    }

Sono nella situazione in cui devo controllare le finestre di dialogo di spawn, ognuna di esse deve avere un ckeditor incorporato all'interno di queste finestre di dialogo. E così accade che le aree di testo condividano lo stesso ID. (Normalmente questa è una pessima pratica, ma ho 2 jqGrid, uno degli elementi assegnati e un altro degli elementi non assegnati.) Condividono una configurazione quasi identica. Pertanto, sto usando un codice comune per configurare entrambi.

Quindi, quando carico una finestra di dialogo, per aggiungere righe o per modificarle, da jqGrid; Devo rimuovere tutte le istanze di CKEDITOR in tutte le aree di testo.

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

    }
});

Questo eseguirà un ciclo su tutte le aree di testo e, se è presente un'istanza CKEDITOR, distruggila.

In alternativa, se usi jQuery puro:

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

    }
});

rimuovere class="ckeditor", potrebbe aver attivato l'inizializzazione di ckeditor

Ho avuto lo stesso problema in cui stavo ricevendo un'eccezione di riferimento nullo e la parola "null" sarebbe stata visualizzata nell'editor. Ho provato una manciata di soluzioni, incluso l'aggiornamento dell'editor a 3.4.1 senza alcun risultato.

Ho finito per dover modificare la fonte. All'incirca alla riga da 416 a 426 in _source \ plugins \ wysiwygarea \ plugin.js, c'è uno snippet come questo:

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

Almeno in FF, l'iframe non è completamente istanziato nel tempo necessario. Ho circondato il resto della funzione dopo quella riga con una funzione setTimeout:

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
...

Il testo viene visualizzato in modo coerente ora nelle finestre di dialogo modali.

Per supportare il caricamento dinamico (Ajax) di moduli (senza aggiornamenti di pagina tra) che contengono aree di testo con lo stesso (lo stesso modulo viene richiamato di nuovo) o diversi ID (modulo precedentemente scaricato) e convertirli in elementi CKEditor ho fatto quanto segue (usando JQuery adattatore):

Dopo che la pagina ha terminato ogni chiamata Ajax che fornisce un'area di testo da convertire, effettuo una chiamata alla seguente funzione:

setupCKeditor()

Questo assomiglia a questo (presuppone che le tue aree di testo vengano convertite in RTE hanno class = "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);

            });

    }


}

Dovrei menzionare che la linea:

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

potrebbe (e dovrebbe) essere semplicemente:

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

tuttavia ho scoperto che l'editor mostrava spesso il contenuto corretto per un secondo dopo il caricamento e svuotava l'editor del contenuto desiderato. Quindi quella riga con il codice di callback forza il contenuto di CKEditor ad essere lo stesso del contenuto textarea di origine. Provoca uno sfarfallio quando viene utilizzato. Se puoi evitare di usarlo, fallo ..

Ho avuto esattamente lo stesso problema come Jackboberg. Stavo usando il caricamento dinamico dei moduli nelle finestre di dialogo jquery, quindi allegando vari widget (datepicker, ckeditors ecc ...). E ho provato tutte le soluzioni indicate sopra, nessuna ha funzionato per me.

Per qualche motivo ckeditor è stato allegato solo la prima volta che ho caricato il modulo, la seconda volta ho ricevuto esattamente lo stesso messaggio di errore ricevuto da jackboberg.

Ho analizzato il mio codice e ho scoperto che se colleghi ckeditor a "mezz'aria", cioè mentre il contenuto del modulo non è ancora posizionato nella finestra di dialogo, ckeditor non allegherà correttamente i suoi vincoli. Questo perché ckeditor è attaccato "a mezz'aria", la seconda volta che lo colleghi a "mezz'aria" ... poof ... viene generato un errore poiché la prima istanza non è stata rimossa correttamente dal DOM.

Questo è stato il mio codice che ha prodotto l'errore:

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();

Questa è la soluzione che ha funzionato:

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

Mi sono imbattuto in questa identica cosa e il problema era che il plugin wordcount impiegava troppo tempo per inizializzarsi. 30+ secondi. L'utente farebbe clic nella vista che mostra il ckeditor, quindi annulla, caricando in tal modo ajax una nuova pagina nel dom. Il plugin si lamentava perché l'iframe o qualsiasi altro contenuto a cui puntava la finestra non era più visibile nel momento in cui era pronto per aggiungersi a contentWindow. Puoi verificarlo facendo clic nella tua vista e quindi aspettando che il conteggio parole appaia in basso a destra nell'editor. Se annulli ora, non avrai problemi. Se non lo aspetti, otterrai l'errore i.contentWindow nullo. Per risolverlo, elimina il plug-in:

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

Se hai bisogno di un contatore di parole, registrati per gli eventi paste e keyup nell'editor con una funzione che conta le parole.

Per coloro che utilizzano l '"adattatore" jquery e hanno problemi (come me), una soluzione super hacker ma funzionante è fare qualcosa del genere:

// 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();

});

Il punto chiave è questa parte:

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

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

Questo risolve il problema con il testo dell'editor che non è visibile la prossima volta che apri la finestra di dialogo. Mi rendo conto che questo è molto hacker, ma considerando che la maggior parte di questi verrà utilizzata per gli strumenti di amministrazione, non penso che sia una preoccupazione così grande come normalmente sarebbe .. e questo funziona, quindi spero che salverà qualcuno tempo ;)

Questo è il codice completamente funzionante per jquery .load () api e ckeditor, nel mio caso sto caricando una pagina con ckeditor in div con alcuni effetti jquery. Spero ti possa aiutare.

 $(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')" >

È piuttosto semplice. Nel mio caso, ho eseguito il seguente metodo jquery che distruggerà le istanze di ckeditor durante il caricamento di una pagina. Questo ha funzionato e ha risolto il problema -

Metodo 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

       });

Questo è tutto. Spero ti aiuti.

Saluti, Sirish.

Questa funzione funziona per me nella versione 4.4.5 di CKEditor, non ha perdite di memoria

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

// chiama questa funzione come di seguito

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

CKEditor_Render(id);

CKeditor 4.2.1

Ci sono molte risposte qui ma per me avevo bisogno di qualcosa di più (anche un po 'sporco, quindi se qualcuno può migliorare per favore fallo). Per me MODAL dove il mio problema.

Stavo eseguendo il rendering di CKEditor in modalità modale, utilizzando Foundation. Idealmente avrei distrutto l'editor alla chiusura, ma non volevo fare confusione con la Fondazione.

Ho chiamato Elimina, ho provato a rimuovere e un altro metodo, ma questo è stato quello che ho finalmente risolto.

Stavo usando textarea per popolare non DIV.

La mia soluzione

//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());
            }

questo era il mio metodo per restituire la mia formattazione specifica, che potresti non volere.

    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']
                    ]
                };
    }

Prova questo:

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