L'instance CKEditor existe déjà

J'utilise des dialogues jquery pour présenter des formulaires (récupérés via AJAX). Sur certains formulaires, j'utilise un CKEditor pour les zones de texte. L'éditeur affiche bien sur le premier chargement.

Lorsque l'utilisateur annule la boîte de dialogue, je supprime le contenu afin qu'il soit chargé à nouveau lors d'une demande ultérieure. Le problème est qu'une fois la boîte de dialogue rechargée, le CKEditor affirme que l'éditeur existe déjà.

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

L'API comprend une méthode pour détruire les éditeurs existants, et j'ai vu des gens affirmer qu'il s'agissait d'une solution:

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

Cela ne fonctionne pas pour moi, car je reçois une nouvelle erreur à la place:

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

Cette erreur semble se produire sur le "destroy ()" plutôt que le "replace ()". Quelqu'un a-t-il vécu cela et trouvé une solution différente?

Est-il possible de «re-rendre» l'éditeur existant, plutôt que de le détruire et de le remplacer?

MISE À JOUR Voici une autre question traitant du même problème, mais il a fourni un cas de test téléchargeable .

Pour que cela fonctionne, vous devez passer le paramètre booléen true lors de la destruction de l'instance:

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

J'ai eu ce problème aussi, mais je l'ai résolu d'une manière beaucoup plus simple ...

J'utilisais la classe "ckeditor" dans mon script jQuery comme sélecteur pour les zones de texte que je voulais utiliser pour CKEditor. Le script JS par défaut de ckeditor utilise également cette classe pour identifier les zones de texte à utiliser pour CKEditor.

Cela signifiait qu'il y avait un conflit entre mon script jQuery et le script ckeditor par défaut.

J'ai simplement changé la classe du textarea et mon script jQuery en 'do_ckeditor' (vous pouvez utiliser n'importe quoi sauf "ckeditor") et cela a fonctionné.

C'est la solution la plus simple (et la seule) qui a fonctionné pour moi:

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

La suppression de cette entrée dans le tableau empêche ce contrôle de sécurité du formulaire de détruire votre application.

destroy () et remove () ne fonctionnaient pas pour moi.

Cela vous aidera peut-être - j'ai fait quelque chose de similaire en utilisant jquery, sauf que je charge un nombre inconnu d'objets ckeditor. Il m'a fallu un certain temps pour tomber dessus - ce n'est pas clair dans la documentation.

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

Et voici ce que je lance pour obtenir le contenu des éditeurs:

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

MISE À JOUR : J'ai changé ma réponse pour utiliser la bonne méthode - qui est .destroy (). .remove () est censé être interne et a été mal documenté à un moment donné.

J'ai eu un problème similaire où nous faisions plusieurs instances de CKeditor pour le contenu chargé via ajax.

CKEDITOR.remove ()

Gardé le DOM dans la mémoire et n'a pas supprimé toutes les liaisons.

CKEDITOR.instance [id_instance] .destroy ()

A donné l'erreur i.contentWindow chaque fois que je crée une nouvelle instance avec de nouvelles données d'ajax. Mais ce n'était que jusqu'à ce que je comprenne que je détruisais l'instance après avoir effacé le DOM.

Utilisez destroy () pendant que l'instance et son DOM sont présents sur la page, cela fonctionne parfaitement bien.

Pour les demandes ajax,

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

cet extrait supprime toutes les instances du document. Crée ensuite de nouvelles instances.

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

le i.contentWindow is null erreur semble se produire lors de l'appel de destroy sur une instance d'éditeur liée à une zone de texte qui n'est plus dans le DOM.

CKEDITORY.destroy prend un paramètre noUpdate .

L'APIdoc déclare:

Si l'instance remplace un élément DOM, ce paramètre indique s'il faut ou non mettre à jour l'élément avec le contenu de l'instance.

Donc, pour éviter l'erreur, appelez destroy avant de supprimer l'élément textarea du DOM, ou appelez destory (true) pour éviter d'essayer de mettre à jour l'élément DOM inexistant.

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

(en utilisant la version 3.6.2 avec l'adaptateur jQuery)

C'est ce qui a fonctionné pour moi:

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

CKEDITOR.instances = new Array();

J'utilise ceci avant mes appels pour créer une instance (un par chargement de page). Je ne sais pas comment cela affecte la gestion de la mémoire ou non. Cela ne fonctionnerait que si vous vouliez remplacer toutes les instances d'une page.

J'ai préparé ma propre solution basée sur tous les codes ci-dessus.

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

Cela fonctionne parfaitement pour moi.

Parfois, après une requête AJAX, la structure DOM est incorrecte. Pour instace:

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

Cela causera également des problèmes et ckEditor ne fonctionnera pas. Assurez-vous donc que vous avez une structure DOM correcte.

J'ai eu le même problème avec les instances, je cherchais partout et finalement cette implémentation fonctionne pour moi:

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

Vous pouvez supprimer n'importe quelle instance de ckeditor par la méthode remove de ckeditor. L'instance sera l'identifiant ou le nom de la zone de texte.

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

En effet, supprimer la classe ".ckeditor" de votre code résout le problème. La plupart d'entre nous ont suivi l'exemple d'intégration jQuery de la documentation de ckeditor:

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

et j'ai pensé "... peut-être que je peux simplement me débarrasser de la partie '.jquery_'".

J'ai perdu mon temps à peaufiner la fonction de rappel (parce que le {skin: 'office2003'} fonctionnait réellement), alors que le problème venait d'ailleurs.

Je pense que la documentation devrait mentionner que l'utilisation de "ckeditor" comme nom de classe n'est pas recommandée, car c'est un mot-clé réservé.

À votre santé.

J'ai appris ça

supprimer CKEDITOR.instances [nom de l'éditeur];

par lui-même, a effectivement supprimé l'instance. TOUTES les autres méthodes que j'ai lues et vues, y compris ce qui a été trouvé ici à stackoverflow par ses utilisateurs, n'ont pas fonctionné pour moi.

Dans ma situation, j'utilise un appel ajax pour extraire une copie du contenu enroulé autour des et. Le problème se trouve être parce que j'utilise un événement jQuery .live pour lier un lien «Modifier ce document», puis j'applique l'instance de ckeditor après le succès du chargement ajax. Cela signifie que lorsque je clique sur un autre lien un lien avec un autre événement .live, je dois utiliser la suppression CKEDITOR.instances [nom_éditeur] dans le cadre de ma tâche d'effacer la fenêtre de contenu (contenant le formulaire), puis de récupérer le contenu détenu dans la base de données ou dans une autre ressource.

J'ai le même problème avec une boîte de dialogue jQuery.

Pourquoi détruire l'instance si vous souhaitez simplement supprimer les données précédentes?

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

J'ai choisi de renommer toutes les instances au lieu de détruire / remplacer - car parfois l'instance chargée AJAX ne remplace pas vraiment celle au cœur de la page ... garde plus de RAM, mais moins de conflits de cette façon.

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

Je suis dans la situation où je dois contrôler les dialogues qui engendrent, chacun d'eux doit avoir un ckeditor intégré dans ces dialogues. Et il se trouve que les zones de texte partagent le même identifiant. (Normalement, c'est une très mauvaise pratique, mais j'ai 2 jqGrids, un des éléments affectés et un autre des éléments non affectés.) Ils partagent une configuration presque identique. Ainsi, j'utilise un code commun pour configurer les deux.

Ainsi, lorsque je charge une boîte de dialogue, pour ajouter des lignes ou pour les éditer, à partir de jqGrid; Je dois supprimer toutes les instances de CKEDITOR dans toutes les zones de texte.

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

    }
});

Cela bouclera sur toutes les zones de texte, et s'il y a une instance de CKEDITOR, la détruira.

Sinon, si vous utilisez jQuery pur:

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

    }
});

remove class="ckeditor", cela pourrait avoir déclenché l'initialisation de ckeditor

J'ai eu le même problème où je recevais une exception de référence nulle et le mot «null» serait affiché dans l'éditeur. J'ai essayé une poignée de solutions, y compris la mise à niveau de l'éditeur vers la version 3.4.1 en vain.

J'ai fini par devoir éditer la source. Aux environs des lignes 416 à 426 dans _source \ plugins \ wysiwygarea \ plugin.js, il y a un extrait comme celui-ci:

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

Dans FF au moins, l'iframe n'est pas complètement instanciée au moment où elle est nécessaire. J'ai entouré le reste de la fonction après cette ligne avec une fonction 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
...

Le texte est rendu cohérent maintenant dans les boîtes de dialogue modales.

Pour prendre en charge le chargement dynamique (Ajax) des formulaires (sans actualisation de la page entre) qui contiennent des zones de texte avec le même (le même formulaire est appelé à nouveau) ou des ID différents (formulaire précédemment déchargé) et les convertir en éléments CKEditor, j'ai fait ce qui suit (en utilisant le JQuery adaptateur):

Une fois que la page a terminé chaque appel Ajax qui délivre une zone de texte à convertir, j'appelle la fonction suivante:

setupCKeditor()

Cela ressemble à ceci (cela suppose que vos zones de texte soient converties en 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);

            });

    }


}

Je dois mentionner que la ligne:

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

pourrait (et devrait) être simplement:

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

cependant j'ai trouvé que l'éditeur montrait souvent le contenu correct pendant une seconde après le chargement et les vidait de l'éditeur du contenu souhaité. Ainsi, cette ligne avec le code de rappel force le contenu de CKEditor à être le même que le contenu textarea d'origine. Provoque un scintillement lorsqu'il est utilisé. Si vous pouvez éviter de l'utiliser, faites-le.

J'ai eu exactement le même problème que jackboberg. J'utilisais le chargement de formulaire dynamique dans les boîtes de dialogue jquery, puis j'attachais divers widgets (datepickers, ckeditors, etc.). Et j'ai essayé toutes les solutions mentionnées ci-dessus, aucune d'elles n'a fonctionné pour moi.

Pour une raison quelconque, ckeditor n'a joint que la première fois que j'ai chargé le formulaire, la deuxième fois que j'ai eu exactement le même message d'erreur que jackboberg.

J'ai analysé mon code et découvert que si vous attachez ckeditor "en l'air" alors que le contenu du formulaire n'est toujours pas placé dans la boîte de dialogue, ckeditor n'attachera pas correctement ses liaisons. C'est parce que ckeditor est attaché en "mid-air", la deuxième fois que vous le connectez en "mid-air" ... pouf ... une erreur est émise car la première instance n'a pas été correctement supprimée du DOM.

C'était mon code qui a produit l'erreur:

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

C'est le correctif qui a fonctionné:

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

J'ai rencontré exactement la même chose et le problème était que le plugin wordcount prenait trop de temps à s'initialiser. 30+ secondes. L'utilisateur cliquait dans la vue affichant le ckeditor, puis annulait, chargeant ainsi ajax une nouvelle page dans le dom. Le plugin se plaignait parce que l'iframe ou tout ce que contentWindow pointe n'était plus visible au moment où il était prêt à s'ajouter à contentWindow. Vous pouvez le vérifier en cliquant dans votre vue, puis en attendant que le nombre de mots apparaisse en bas à droite de l'éditeur. Si vous annulez maintenant, vous n'aurez pas de problème. Si vous ne l'attendez pas, vous obtiendrez l'erreur i.contentWindow is null. Pour résoudre ce problème, supprimez simplement le plugin:

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

Si vous avez besoin d'un compteur de mots, enregistrez-vous pour les événements de collage et de saisie sur l'éditeur avec une fonction qui compte les mots.

Pour ceux qui utilisent l '"adaptateur" jquery et qui ont des problèmes (comme je l'étais), comme solution super hackish mais efficace est de faire quelque chose comme ceci:

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

});

Le point clé étant cette partie:

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

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

Cela résout le problème avec le texte de l'éditeur qui n'est pas visible la prochaine fois que vous ouvrez la boîte de dialogue. Je me rends compte que c'est très hackish, mais étant donné que la plupart d'entre eux seront utilisés pour les outils d'administration, je ne pense pas que ce soit un problème aussi grave que d'habitude ... et cela fonctionne, alors j'espère que cela sauvera quelqu'un temps ;)

Ceci est le code entièrement fonctionnel pour jquery .load () api et ckeditor, dans mon cas, je charge une page avec ckeditor en div avec quelques effets jquery. J'espère que cela vous aidera.

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

C'est assez simple. Dans mon cas, j'ai exécuté la méthode jquery ci-dessous qui détruira les instances de ckeditor lors d'un chargement de page. Cela a fait l'affaire et a résolu le problème -

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

       });

C'est tout. J'espère que ça t'aide.

Salut, Sirish.

Cette fonction fonctionne pour moi dans CKEditor version 4.4.5, il n'y a pas de fuite de mémoire

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

// appelle cette fonction comme ci-dessous

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

CKEditor_Render(id);

CKeditor 4.2.1

Il y a beaucoup de réponses ici mais pour moi j'avais besoin de quelque chose de plus (un peu sale aussi, donc si quelqu'un peut s'améliorer, faites-le). Pour moi, les MODALs où mon problème.

Je rendais le CKEditor dans un modal, en utilisant Foundation. Idéalement, j'aurais détruit l'éditeur à la fermeture, mais je ne voulais pas jouer avec Foundation.

J'ai appelé delete, j'ai essayé de supprimer et une autre méthode, mais c'est ce que j'ai finalement choisi.

J'utilisais des textarea pour ne pas peupler des DIV.

Ma solution

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

c'était ma méthode pour renvoyer ma mise en forme spécifique, dont vous ne voudrez peut-être pas.

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

Essaye ça:

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