CKEditor instance already exists

Question

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.

Answer 1

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) { CKEDITOR.remove(instance); }
            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()); }
        });
    }

Answer 2

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

Answer 3

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

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

Answer 5

Hi,

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

I was using the class ".ckeditor" in the jQuery as the selector for which textares's I wanted ckeditorized.

The default ckeditor js you include before the also uses this class to identify which textareas to ckeditorized. This means both your jQuery ckeditor function and the default ckeditor js are trying to run on the textarea.

What you need to do is simply change the class of the jQuery, I use '.do_ckeditor' and remove the 'ckeditor' class from your html.

I was pulling my hair out about this and felt the need to come back and post my answer.

Hope this helps.

Answer 6

Indeed, removing the ".ckeditor" class from your code solves the issue. Most of us followed the jQuery integration example from the ckeditor's documentation:

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

and thought "... maybe I can just get rid or the '.jquery_' part".

I've been wasting my time tweaking the callback function (because the {skin:'office2003'} actually worked), while the problem was coming from elsewhere.

I think the documentation should mention that the use of "ckeditor" as a class name is not recommended, because it is a reserved keyword.

Cheers.