La instancia de CKEditor ya existe

Estoy usando diálogos de jquery para presentar formularios (obtenidos a través de AJAX). En algunos formularios, estoy usando un CKEditor para las áreas de texto. El editor se muestra bien en la primera carga.

Cuando el usuario cancela el cuadro de diálogo, elimino el contenido para que se carguen nuevos en una solicitud posterior. El problema es que, una vez que se vuelve a cargar el cuadro de diálogo, CKEditor afirma que el editor ya existe.

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

La API incluye un método para destruir editores existentes, y he visto personas que afirman que esta es una solución:

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

Esto no me funciona, ya que recibo un nuevo error:

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

Este error parece ocurrir en "destroy ()" en lugar de "replace ()". ¿Alguien ha experimentado esto y ha encontrado una solución diferente?

¿Es posible 'volver a renderizar' el editor existente, en lugar de destruirlo y reemplazarlo?

ACTUALIZADO Aquí hay otra pregunta que trata con el mismo problema, pero ha proporcionado un caso de prueba descargable .

Para que esto funcione, debe pasar el parámetro booleano verdadero al destruir la instancia:

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

También tuve este problema, pero lo resolví de una manera mucho más simple ...

Estaba usando la clase "ckeditor" en mi script jQuery como selector para las áreas de texto que quería usar para CKEditor. El script JS de ckeditor predeterminado también usa esta clase para identificar qué áreas de texto usar para CKEditor.

Esto significa que hay un conflicto entre mi script jQuery y el script ckeditor predeterminado.

Simplemente cambié la clase del área de texto y mi script jQuery a 'do_ckeditor' (se puede usar cualquier cosa excepto "ckeditor") y funcionó.

Esta es la solución más simple (y única) que funcionó para mí:

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

Eliminar esta entrada en la matriz evita que esta verificación de seguridad del formulario destruya su aplicación.

destruir () y eliminar () no funcionó para mí.

Quizás esto te ayude: he hecho algo similar usando jquery, excepto que estoy cargando un número desconocido de objetos ckeditor. Me tomó un tiempo tropezar con esto, no está claro en la documentación.

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

Y esto es lo que ejecuto para obtener el contenido de los editores:

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

ACTUALIZACIÓN : Cambié mi respuesta para usar el método correcto, que es .destroy (). .remove () está destinado a ser interno y se documentó incorrectamente en un momento.

Tuve un problema similar en el que estábamos creando varias instancias de CKeditor para el contenido cargado a través de ajax.

CKEDITOR.remove ()

Mantuvo el DOM en la memoria y no eliminó todos los enlaces.

CKEDITOR.instance [id_instancia] .destroy ()

Dio el error de error i.contentWindow cada vez que creo una nueva instancia con nuevos datos de ajax. Pero esto fue solo hasta que descubrí que estaba destruyendo la instancia después de borrar el DOM.

Use destroy () mientras la instancia y su DOM están presentes en la página, entonces funciona perfectamente bien.

Para solicitudes de ajax,

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

esto recortado elimina todas las instancias del documento. Luego crea nuevas instancias.

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

El i.contentWindow is nullerror parece ocurrir al llamar a destroy en una instancia de editor que estaba vinculada a un área de texto que ya no está en el DOM.

CKEDITORY.destroytoma un parámetro noUpdate.

El APIdoc dice:

Si la instancia reemplaza un elemento DOM, este parámetro indica si actualizar o no el elemento con el contenido de la instancia.

Entonces, para evitar el error, llame a destroy antes de eliminar el elemento textarea del DOM, o llame a destory (true) para evitar intentar actualizar el elemento DOM que no existe.

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

(usando la versión 3.6.2 con el adaptador jQuery)

Esto es lo que funcionó para mí:

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

CKEDITOR.instances = new Array();

Estoy usando esto antes de mis llamadas para crear una instancia (por carga de página). No estoy seguro de cómo esto afecta el manejo de la memoria y qué no. Esto solo funcionaría si quisiera reemplazar todas las instancias en una página.

He preparado mi propia solución basada en todos los códigos anteriores.

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

Funciona perfectamente para mí.

A veces, después de la solicitud AJAX, hay una estructura DOM incorrecta. Por ejemplo:

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

Esto también causará problemas y ckEditor no funcionará. Así que asegúrese de tener la estructura DOM correcta.

Tuve el mismo problema con las instancias, estaba buscando en todas partes y finalmente esta implementación funciona para mí:

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

Puede eliminar cualquier instancia de ckeditor mediante el método de eliminación de ckeditor. La instancia será id o nombre del área de texto.

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

De hecho, eliminar la clase ".ckeditor" de su código resuelve el problema. La mayoría de nosotros seguimos el ejemplo de integración de jQuery de la documentación del ckeditor:

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

y pensé "... tal vez pueda deshacerme de la parte '.jquery_'".

He estado perdiendo el tiempo ajustando la función de devolución de llamada (porque el {skin: 'office2003'} realmente funcionó), mientras que el problema venía de otra parte.

Creo que la documentación debería mencionar que no se recomienda el uso de "ckeditor" como nombre de clase, porque es una palabra clave reservada.

Salud.

aprendí eso

eliminar CKEDITOR.instances [editorName];

por sí mismo, en realidad eliminó la instancia. TODOS los demás métodos que he leído y visto, incluido lo que se encontró aquí en stackoverflow de sus usuarios, no funcionaron para mí.

En mi situación, estoy usando una llamada ajax para extraer una copia del contenido envuelto alrededor de y. El problema se debe a que estoy usando un evento jQuery .live para vincular un enlace "Editar este documento" y luego aplicar la instancia de ckeditor después del éxito de la carga de ajax. Esto significa que cuando hago clic en otro enlace, un enlace con otro evento .live, debo usar eliminar CKEDITOR.instances [editorName] como parte de mi tarea de borrar la ventana de contenido (sosteniendo el formulario) y luego recuperar el contenido retenido. en la base de datos u otro recurso.

Tuve el mismo problema con un jQuery Dialog.

¿Por qué destruir la instancia si solo desea eliminar datos anteriores?

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

Elegí cambiar el nombre de todas las instancias en lugar de destruir / reemplazar, ya que a veces la instancia cargada con AJAX no reemplaza realmente a la que está en el núcleo de la página ... mantiene más en RAM, pero menos conflictos de esta manera.

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

Estoy en la situación en la que tengo que controlar los cuadros de diálogo que generan, cada uno de ellos debe tener un ckeditor incrustado dentro de estos cuadros de diálogo. Y da la casualidad de que las áreas de texto comparten la misma identificación. (normalmente esto es una práctica muy mala, pero tengo 2 jqGrids, uno de elementos asignados y otro de elementos no asignados). Comparten una configuración casi idéntica. Por lo tanto, estoy usando un código común para configurar ambos.

Entonces, cuando cargo un diálogo, para agregar filas o para editarlas, desde jqGrid; Debo eliminar todas las instancias de CKEDITOR en todas las áreas de texto.

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

    }
});

Esto recorrerá todas las áreas de texto y, si hay una instancia de CKEDITOR, la destruirá.

Alternativamente, si usa jQuery puro:

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

    }
});

eliminar class="ckeditor", podría haber activado la inicialización de ckeditor

Tuve el mismo problema en el que recibía una excepción de referencia nula y la palabra "nulo" se mostraba en el editor. Probé un puñado de soluciones, incluida la actualización del editor a 3.4.1 en vano.

Terminé teniendo que editar la fuente. Aproximadamente en la línea 416 a 426 en _source \ plugins \ wysiwygarea \ plugin.js, hay un fragmento como este:

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

En FF al menos, el iframe no está completamente instanciado en el momento en que se necesita. Rodeé el resto de la función después de esa línea con una función 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
...

El texto se representa ahora de forma coherente en los diálogos modales.

Para admitir la carga dinámica (Ajax) de formularios (sin actualizaciones de página entre ellos) que contienen áreas de texto con el mismo (se vuelve a llamar al mismo formulario) o ID diferentes (formulario descargado previamente) y convertirlos en elementos CKEditor, hice lo siguiente (usando JQuery adaptador):

Una vez que la página ha finalizado cada llamada Ajax que entrega un área de texto para convertir, hago una llamada a la siguiente función:

setupCKeditor()

Esto se ve así (asume que sus áreas de texto que se convertirán a RTE tienen 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);

            });

    }


}

Debo mencionar que la línea:

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

podría (y debería) ser simplemente:

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

sin embargo, descubrí que el editor a menudo mostraba el contenido correcto durante un segundo después de la carga y vacía el editor del contenido deseado. Entonces, esa línea con el código de devolución de llamada obliga al contenido de CKEditor a ser el mismo que el contenido del área de texto de origen. Provoca un parpadeo cuando se usa. Si puede evitar su uso, hágalo ..

Tuve exactamente el mismo problema que Jackboberg. Estaba usando la carga de formularios dinámicos en los diálogos de jquery y luego adjuntaba varios widgets (datepickers, ckeditors, etc.). Y probé todas las soluciones mencionadas anteriormente, ninguna de ellas funcionó para mí.

Por alguna razón, ckeditor solo adjuntó la primera vez que cargué el formulario, la segunda vez recibí exactamente el mismo mensaje de error que recibió Jackboberg.

Analicé mi código y descubrí que si adjunta ckeditor en "el aire", es decir, mientras el contenido del formulario todavía no se coloca en el diálogo, ckeditor no adjuntará correctamente sus enlaces. Esto se debe a que ckeditor está adjunto en "mid-air", la segunda vez que lo adjunta en "mid-air" ... puf ... se produce un error ya que la primera instancia no se eliminó correctamente de DOM.

Este fue mi código que produjo el error:

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

Esta es la solución que funcionó:

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

Me encontré con exactamente lo mismo y el problema era que el complemento de recuento de palabras estaba tardando demasiado en inicializarse. 30+ segundos. El usuario haría clic en la vista que muestra el ckeditor, luego cancelaría, por lo que ajax cargaría una nueva página en el dom. El complemento se quejaba porque el iframe o cualquier elemento al que apuntaba contentWindow ya no estaba visible en el momento en que estaba listo para agregarse a contentWindow. Puede verificar esto haciendo clic en su vista y luego esperando que aparezca el recuento de palabras en la parte inferior derecha del editor. Si cancela ahora, no tendrá ningún problema. Si no lo espera, obtendrá el error i.contentWindow es nulo. Para solucionarlo, simplemente deseche el complemento:

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

Si necesita un contador de palabras, regístrese para los eventos de pegado y teclado en el editor con una función que cuenta las palabras.

Para aquellos que usan el "adaptador" de jquery y tienen problemas (como yo), una solución súper pirateada pero funcional es hacer algo como esto:

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

});

El punto clave es esta parte:

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

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

Esto soluciona el problema de que el texto del editor no sea visible la próxima vez que abra el cuadro de diálogo. Me doy cuenta de que esto es muy engañoso, pero teniendo en cuenta que la mayoría de estos se usarán para herramientas de administración, no creo que sea una preocupación tan grande como lo sería normalmente ... y esto funciona, así que espero que le salve a alguien un poco. hora ;)

Este es el código completamente funcional para jquery .load () api y ckeditor, en mi caso, estoy cargando una página con ckeditor en div con algunos efectos de jquery. Espero que te ayude.

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

Es bastante simple. En mi caso, ejecuté el siguiente método jquery que destruirá las instancias de ckeditor durante la carga de una página. Esto funcionó y resolvió el problema:

Método 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

       });

Eso es. Espero que te ayude.

Saludos, Sirish.

Esta función me funciona en CKEditor versión 4.4.5, no tiene fugas de memoria

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

// llamar a esta función como se muestra a continuación

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

CKEditor_Render(id);

CKeditor 4.2.1

Hay muchas respuestas aquí, pero para mí necesitaba algo más (un poco sucio también, así que si alguien puede mejorar, hágalo). Para mí MODALs donde mi problema.

Estaba renderizando el CKEditor en un modal, usando Foundation. Idealmente, hubiera destituido al editor al cerrar, sin embargo, no quería meterme con Foundation.

Llamé a eliminar, intenté eliminar y otro método, pero esto fue con lo que finalmente me conformé.

Estaba usando textarea's para poblar no DIVs.

Mi solución

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

este fue mi método para devolver mi formato específico, que es posible que no desee.

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

Prueba esto:

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