A instância CKEditor já existe

Estou usando diálogos jquery para apresentar formulários (obtidos via AJAX). Em alguns formulários, estou usando um CKEditor para as áreas de texto. O editor exibe bem no primeiro carregamento.

Quando o usuário cancela a caixa de diálogo, estou removendo o conteúdo para que seja carregado novamente em uma solicitação posterior. O problema é que, depois que a caixa de diálogo é recarregada, o CKEditor afirma que o editor já existe.

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

A API inclui um método para destruir editores existentes, e vi pessoas alegando que essa é uma solução:

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

Isso não está funcionando para mim, pois recebo um novo erro:

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

Este erro parece ocorrer em "destroy ()" em vez de "replace ()". Alguém experimentou isso e encontrou uma solução diferente?

É possível 're-renderizar' o editor existente, ao invés de destruí-lo e substituí-lo?

ATUALIZADO Aqui está outra questão que trata do mesmo problema, mas ele forneceu um caso de teste para download .

Para que isso funcione, você precisa passar o parâmetro booleano true ao destruir a instância:

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

Eu também tive esse problema, mas resolvi de uma forma bem mais simples ...

Eu estava usando a classe "ckeditor" em meu script jQuery como o seletor para quais áreas de texto eu queria usar para o CKEditor. O script JS ckeditor padrão também usa essa classe para identificar quais áreas de texto usar para CKEditor.

Isso significa que há um conflito entre meu script jQuery e o script ckeditor padrão.

Eu simplesmente mudei a classe da textarea e meu script jQuery para 'do_ckeditor' (você pode usar qualquer coisa, exceto "ckeditor") e funcionou.

Esta é a solução mais simples (e única) que funcionou para mim:

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

A exclusão dessa entrada na matriz evita que a verificação de segurança do formulário destrua seu aplicativo.

destroy () e remove () não funcionaram para mim.

Talvez isso o ajude - fiz algo semelhante usando jquery, exceto que estou carregando um número desconhecido de objetos ckeditor. Demorei para descobrir isso - não está claro na documentação.

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

E aqui está o que eu executo para obter o conteúdo dos editores:

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

ATUALIZAÇÃO : mudei minha resposta para usar o método correto - que é .destroy (). .remove () deve ser interno e foi documentado incorretamente em um ponto.

Eu tive um problema semelhante onde estávamos fazendo várias instâncias do CKeditor para o conteúdo carregado via ajax.

CKEDITOR.remove ()

Manteve o DOM na memória e não removeu todas as ligações.

CKEDITOR.instance [instance_id] .destroy ()

Deu o erro i.contentWindow error sempre que eu crio uma nova instância com novos dados do ajax. Mas isso foi apenas até eu descobrir que estava destruindo a instância depois de limpar o DOM.

Use destroy () enquanto a instância e seu DOM estiverem presentes na página, então funcionará perfeitamente bem.

Para solicitações de ajax,

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

este recortado remove todas as instâncias do documento. Em seguida, cria novas instâncias.

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

O i.contentWindow is nullerro parece ocorrer ao chamar destroy em uma instância do editor que estava vinculada a uma textarea que não estava mais no DOM.

CKEDITORY.destroyleva um parâmetro noUpdate.

O APIdoc afirma:

Se a instância estiver substituindo um elemento DOM, este parâmetro indica se deve ou não atualizar o elemento com o conteúdo da instância.

Portanto, para evitar o erro, chame destroy antes de remover o elemento textarea do DOM ou chame destory (true) para evitar a tentativa de atualizar o elemento DOM inexistente.

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

(usando a versão 3.6.2 com adaptador jQuery)

Isto é o que funcionou para mim:

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

CKEDITOR.instances = new Array();

Estou usando isso antes de minhas chamadas para criar uma instância (algumas por carregamento de página). Não tenho certeza de como isso afeta o tratamento da memória e quais não. Isso só funcionaria se você quisesse substituir todas as instâncias em uma página.

Eu preparei minha própria solução com base em todos os códigos acima.

      $("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 perfeitamente para mim.

Às vezes, após a solicitação AJAX, há uma estrutura DOM incorreta. Por exemplo:

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

Isso também causará problemas e o ckEditor não funcionará. Portanto, certifique-se de ter a estrutura DOM correta.

Eu tive o mesmo problema com instâncias, estava procurando em todos os lugares e, finalmente, esta implementação funciona para mim:

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

Você pode remover qualquer instância do ckeditor pelo método remove do ckeditor. A instância será id ou nome da textarea.

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

Na verdade, remover a classe ".ckeditor" do seu código resolve o problema. A maioria de nós seguiu o exemplo de integração jQuery da documentação do ckeditor:

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

e pensei "... talvez eu possa apenas me livrar ou a parte '.jquery_'".

Tenho perdido meu tempo ajustando a função de retorno de chamada (porque o {skin: 'office2003'} realmente funcionou), enquanto o problema estava vindo de outro lugar.

Acho que a documentação deve mencionar que o uso de "ckeditor" como um nome de classe não é recomendado, porque é uma palavra-chave reservada.

Felicidades.

Eu aprendi isso

excluir CKEDITOR.instances [editorName];

por si só, realmente removeu a instância. TODOS os outros métodos que li e vi, incluindo o que foi encontrado aqui no stackoverflow de seus usuários, não funcionaram para mim.

Na minha situação, estou usando uma chamada ajax para puxar uma cópia do conteúdo enrolado em e de. O problema acontece porque estou usando um evento jQuery .live para vincular um link "Editar este documento" e, em seguida, aplicando a instância ckeditor após o sucesso do carregamento do ajax. Isso significa que, quando clico em outro link de um link com outro evento .live, devo usar delete CKEDITOR.instances [editorName] como parte de minha tarefa de limpar a janela de conteúdo (segurando o formulário) e, em seguida, buscar novamente o conteúdo mantido no banco de dados ou outro recurso.

Eu tive o mesmo problema com um diálogo jQuery.

Por que destruir a instância se você apenas deseja remover os dados anteriores?

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

Eu escolhi renomear todas as instâncias em vez de destruir / substituir - já que às vezes a instância carregada com AJAX não substitui realmente aquela no núcleo da página ... mantém mais na RAM, mas menos conflito desta forma.

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

Estou em uma situação em que tenho que controlar que geram diálogos, cada um deles precisa ter um ckeditor embutido nesses diálogos. E acontece que as áreas de texto compartilham o mesmo id. (normalmente esta é uma prática muito ruim, mas eu tenho 2 jqGrids, um de itens atribuídos e outro de itens não atribuídos.) Eles compartilham uma configuração quase idêntica. Portanto, estou usando um código comum para configurar ambos.

Então, quando eu carrego uma caixa de diálogo, para adicionar linhas, ou para editá-los, de qualquer jqGrid; Devo remover todas as instâncias de CKEDITOR em todas as áreas de texto.

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

    }
});

Isso fará um loop em todas as áreas de texto e, se houver uma instância CKEDITOR, então a destruirá.

Alternativamente, se você usar jQuery puro:

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

    }
});

remover class="ckeditor", pode ter acionado a inicialização do ckeditor

Eu tive o mesmo problema em que estava recebendo uma exceção de referência nula e a palavra "nula" seria exibida no editor. Tentei um punhado de soluções, incluindo atualizar o editor para 3.4.1 sem sucesso.

Acabei tendo que editar a fonte. Por volta das linhas 416 a 426 em _source \ plugins \ wysiwygarea \ plugin.js, há um snippet como este:

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

Pelo menos no FF, o iframe não é completamente instanciado no momento em que é necessário. Envolvi o resto da função após essa linha com uma função 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
...

O texto é renderizado de forma consistente agora nos diálogos modais.

Para suportar o carregamento dinâmico (Ajax) de formulários (sem atualizações de página entre) que contêm áreas de texto com o mesmo (o mesmo formulário é chamado novamente) ou IDs diferentes (formulário previamente descarregado) e convertê-los em elementos CKEditor, fiz o seguinte (usando o JQuery adaptador):

Depois que a página termina cada chamada Ajax que entrega uma textarea a ser convertida, faço uma chamada para a seguinte função:

setupCKeditor()

Isso se parece com isto (pressupõe que suas áreas de texto sejam convertidas em RTE's have 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);

            });

    }


}

Devo mencionar que a linha:

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

poderia (e deveria) ser simplesmente:

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

no entanto, descobri que o editor frequentemente mostrava o conteúdo correto por um segundo após o carregamento e esvaziava o editor do conteúdo desejado. Portanto, essa linha com o código de retorno de chamada força o conteúdo do CKEditor a ser igual ao conteúdo da área de texto de origem. Causa tremulação quando usado. Se você puder evitar usá-lo, faça-o ..

Eu tive exatamente o mesmo problema que o jackboberg. Eu estava usando o carregamento dinâmico de formulários em diálogos jquery e, em seguida, anexando vários widgets (datepickers, ckeditors etc ...). E tentei todas as soluções mencionadas acima, nenhuma delas funcionou para mim.

Por alguma razão, o ckeditor apenas anexou na primeira vez que carreguei o formulário, na segunda vez recebi exatamente a mesma mensagem de erro que o jackboberg.

Eu analisei meu código e descobri que se você anexar o ckeditor no "meio do ar", enquanto o conteúdo do formulário ainda não foi colocado no diálogo, o ckeditor não anexará suas ligações corretamente. Isso é porque o ckeditor está conectado no "meio do ar", da segunda vez que você o anexa no "meio do ar" ... puf ... um erro é gerado, pois a primeira instância não foi removida corretamente do DOM.

Este foi o meu código que produziu o erro:

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 é a correção que funcionou:

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

Encontrei exatamente a mesma coisa e o problema é que o plugin wordcount estava demorando muito para inicializar. 30+ segundos. O usuário clica na visualização que exibe o ckeditor e, em seguida, cancela, carregando com o ajax uma nova página no dom. O plug-in estava reclamando porque o iframe ou qualquer outro item para o qual contentWindow está apontando não estava mais visível no momento em que estava pronto para ser adicionado ao contentWindow. Você pode verificar isso clicando em sua visualização e aguardando que a contagem de palavras apareça no canto inferior direito do editor. Se você cancelar agora, não terá problemas. Se você não esperar por isso, receberá o erro i.contentWindow is null. Para consertar, apenas descarte o plugin:

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

Se você precisar de um contador de palavras, registre-se para os eventos de colagem e tecla no editor com uma função que conta as palavras.

Para aqueles que usam o "adaptador" jquery e estão tendo problemas (como eu), como uma solução super hackeada, mas funcional, é fazer algo assim:

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

});

O ponto principal é esta parte:

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

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

Isso corrige o problema de o texto do editor não estar visível na próxima vez que você abrir a caixa de diálogo. Sei que isso é muito hackeado, mas considerando que a maioria deles será usada para ferramentas de administração, não acho que seja uma preocupação tão grande como normalmente seria .. e isso funciona, então espero que possa salvar alguém Tempo ;)

Este é o código totalmente funcional para jquery .load () api e ckeditor, no meu caso, estou carregando uma página com ckeditor em div com alguns efeitos jquery. Espero que ajude você.

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

É muito simples. No meu caso, executei o método jquery abaixo, que destruirá as instâncias do ckeditor durante o carregamento da página. Isso funcionou e resolveu o 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

       });

É isso aí. Espero que ajude você.

Saúde, Sirish.

Esta função funciona para mim no CKEditor versão 4.4.5, não tem nenhum vazamento de memória

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

// chame esta função como abaixo

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

CKEditor_Render(id);

CKeditor 4.2.1

Há muitas respostas aqui, mas para mim eu precisava de algo mais (um pouco sujo também, se alguém puder melhorar, por favor, faça). Para mim, MODALs onde meu problema.

Eu estava renderizando o CKEditor em modal, usando Foundation. Idealmente, eu teria destruído o editor ao fechar, mas não queria mexer com a Fundação.

Eu chamei delete, tentei remover e outro método, mas foi com isso que finalmente me decidi.

Eu estava usando textarea para preencher não DIVs.

Minha Solução

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

esse era o meu método para retornar minha formatação específica, que você pode não querer.

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

Experimente isto:

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