CKEditor instance already exists

CKEditor instance already exists

I am using jquery dialogs to present forms (fetched via AJAX). On some forms I am using a CKEditor for the textareas. The editor displays fine on the first load.
When the user cancels the dialog, I am removing the contents so that they are loaded fresh on a later request. The issue is, once the dialog is reloaded, the CKEditor claims the editor already exists.
uncaught exception: [CKEDITOR.editor] The instance “textarea_name” already exists.

The API includes a method for destroying existing editors, and I have seen people claiming this is a solution:
if (CKEDITOR.instances[‘textarea_name’]) {
CKEDITOR.instances[‘textarea_name’].destroy();
}
CKEDITOR.replace(‘textarea_name’);

This is not working for me, as I receive a new error instead:
TypeError: Result of expression ‘i.contentWindow’ [null] is not an object.

This error seems to occur on the “destroy()” rather than the “replace()”. Has anyone experienced this and found a different solution?
Is is possible to ‘re-render’ the existing editor, rather than destroying and replacing it?
UPDATED
Here is another question dealing with the same problem, but he has provided a downloadable test case.

Solutions/Answers:

Solution 1:

For this to work you need to pass boolean parameter true when destroying instance:

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

Solution 2:

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

Solution 3:

I had this problem too, but I solved it in a much simpler way…

I was using the class “ckeditor” in my jQuery script as the selector for which textareas I wanted use for CKEditor. The default ckeditor JS script also uses this class to identify which textareas to use for CKEditor.

This meant there is a conflict between my jQuery script and the default ckeditor script.

I simply changed the class of the textarea and my jQuery script to ‘do_ckeditor'(you could use anything except “ckeditor”) and it worked.

Solution 4:

This is the simplest (and only) solution that worked for me:

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

Deleting this entry in the array prevents this form safety check from destroying your application.

destroy() and remove() did not work for me.

Solution 5:

Perhaps this will help you out – I’ve done something similar using jquery, except I’m loading up an unknown number of ckeditor objects. It took my a while to stumble onto this – it’s not clear in the 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);
        });
    }
}

And here is what I run to get the content from the editors:

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

UPDATE: I’ve changed my answer to use the correct method – which is .destroy(). .remove() is meant to be internal, and was improperly documented at one point.

Solution 6:

I’ve had similar issue where we were making several instances of CKeditor for the content loaded via ajax.

CKEDITOR.remove()

Kept the DOM in the memory and didn’t remove all the bindings.

CKEDITOR.instance[instance_id].destroy()

Gave the error i.contentWindow error whenever I create new instance with new data from ajax. But this was only until I figured out that I was destroying the instance after clearing the DOM.

Use destroy() while the instance & it’s DOM is present on the page, then it works perfectly fine.