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.

Tomas Kirda · Answer 1 · 2012-04-25T22:37:49.297

104

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

edited Apr 25 '12 at 22:37

answered Feb 01 '11 at 00:18

Tomas Kirda

8,347
3
31
23

2

The "true" options makes all the difference. It is also worth mentioning that the "CKEDITOR.remove(instance)" answer given below is not a good solution as it is an internal API that can also produce errors, it is always better to use instance.destroy(true) – Bala Clark May 14 '12 at 12:43
Thank you, this realy help me out. – incomplete Jul 09 '12 at 09:16
6

Joining in on the choir of thankers! I love how Stack Overflow always just solves all my problems with one search. – Tommi Forsström Jul 09 '12 at 18:21
1

This answer is SO useful, I'm surprised it is buried so deep in here. – Petr Vostrel Mar 19 '13 at 00:36
2

There should have been an option to sort the answers by the number of votes they received.. so the best answers come to top. – shasi kanth Jun 21 '13 at 08:35
When I use this method, my new editor instance never becomes loaded. It always shows as loaded: false and status: unloaded. Anyone else experience this? – Will Hitchcock Mar 02 '15 at 18:45

score 28 · Answer 2 · answered Mar 04 '10 at 06:36

28

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

answered Mar 04 '10 at 06:36

Jim

361
3
3

This caused me a bit of grief, but your solution helped out. Thanks! – Ben Scheirman Apr 26 '10 at 15:55
I had a similar problem in firefox which had three instances of the CKEditor on the page, the first one was not displaying but the other two where, I added the above code and all teh editors now appear – Craig Angus Apr 29 '10 at 15:56
18

Don't use CKEDITOR.remove because it only clears the element from the array, but leaves all the DOM in memory. It's stated in the docs that it's meant for internal use: http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.html#.remove You should use instead instace.destroy() as madhaviaddanki said. – AlfonsoML Jun 29 '10 at 11:04
2

Ran across the same situation and as noted, this answer is incorrect. Using destroy() and passing the true parameter is what finally worked for me, as noted below. – Mathachew May 04 '12 at 15:14

score 19 · Answer 3 · edited Jul 04 '16 at 11:04

19

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.

edited Jul 04 '16 at 11:04

voidstate

7,937
4
40
52

answered Sep 13 '10 at 14:59

CafeHey

5,699
19
82
145

thanks, yeah the "auto" ckeditorizing was messing with me too. see also http://stackoverflow.com/a/3631391/923817 – D.Tate Dec 31 '13 at 04:21

adu · Answer 4 · 2010-08-12T21:48:34.253

11

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.

edited Aug 12 '10 at 21:48

answered Aug 02 '10 at 18:30

adu

947
1
8
15

1

This is the only solution that worked with me also, thanks for posting it! – Michael Robinson Aug 10 '10 at 05:30
I did get destroy() to work. But neither `delete` or `destroy()` fully clean up the editor instance. Things like the dictionary and other associated objects will still lurk around. – adu Aug 12 '10 at 21:51
I tried instance.destroy(true), but it didn't worked for me. But this one worked for me. Can anyone please tell me, is there any sideaffects of this? – Manjeet Jan 07 '15 at 09:45

ScottE · Answer 5 · 2012-02-21T15:56:14.920

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.

This seems to have removed the errors, but on the second rendering the textarea now contains 'null' and I can no longer interact with the toolbar or the textarea. If I do click on toolbar buttons I receive errors like: "TypeError: Result of expression 'this.$.focus' [undefined] is not a function" -or- "TypeError: Result of expression 'this.document.getWindow().$' [undefined] is not an object". Where/when do you call that function? I have my script inline with the jquery loaded content. (ckeditor.js in the head of the parent html) — jackboberg, Nov 25 '09 at 13:30
I call this after all textareas have been added to the page and filled with content. — ScottE, Nov 25 '09 at 13:34

score 6 · Answer 6 · edited Apr 15 '12 at 15:09

6

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

edited Apr 15 '12 at 15:09

Sebastian Paaske Tørholm

49,493
11
100
118

answered Dec 14 '09 at 14:22

madhaviaddanki

61
1

score 5 · Answer 7 · answered Nov 30 '10 at 22:02

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.

score 5 · Answer 8 · answered Jul 20 '11 at 12:55

5

For ajax requests,

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

this snipped removes all instances from document. Then creates new instances.

answered Jul 20 '11 at 12:55

nerkn

1,867
1
20
36

score 3 · Answer 9 · answered Aug 09 '13 at 14:10

3

This is what worked for me:

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

answered Aug 09 '13 at 14:10

mikemike396

2,435
1
26
41

Make sure your "cancel" code calls something similar to this! MY issue was that my cancel wasn't calling destroy :) – ROunofF Nov 17 '13 at 16:46

score 3 · Answer 10 · answered Dec 07 '11 at 22:38

The i.contentWindow is null error seems to occur when calling destroy on an editor instance that was tied to a textarea no longer in the DOM.

CKEDITORY.destroy takes a parameter noUpdate.

The APIdoc states:

If the instance is replacing a DOM element, this parameter indicates whether or not to update the element with the instance contents.

So, to avoid the error, either call destroy before removing the textarea element from the DOM, or call destory(true) to avoid trying to update the non-existent DOM element.

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

(using version 3.6.2 with jQuery adapter)

Tomasz Maj · Answer 11 · 2012-07-10T06:51:26.490

I've prepared my own solution based on all above codes.

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

It works perfectly for me.

Sometimes after AJAX request there is wrong DOM structure. For instace:

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

This will cause issue as well, and ckEditor will not work. So make sure that you have correct DOM structure.

score 2 · Answer 12 · answered Sep 11 '12 at 21:25

i had the same problem with instances, i was looking everywhere and finally this implementation works for me:



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

score 2 · Answer 13 · answered Jun 19 '13 at 13:14

2

You can remove any ckeditor instance by remove method of ckeditor. Instance will be id or name of the textarea.

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

answered Jun 19 '13 at 13:14

ujjwal

29
3

score 2 · Answer 14 · answered Sep 21 '11 at 19:10

2

CKEDITOR.instances = new Array();

I am using this before my calls to create an instance (ones per page load). Not sure how this affects memory handling and what not. This would only work if you wanted to replace all of the instances on a page.

answered Sep 21 '11 at 19:10

Andrew

29
1

1

I tried all the solutions on this page...for my environment, this is the only one that worked (but didn't work right in my ie9 only FF)...not sure why the others didn't but after 1 hour of trial and error, this is the only solution that worked for me. Thanks for posting this andrew. – Ronedog Aug 03 '12 at 22:29

score 1 · Answer 15 · answered Apr 28 '14 at 10:06

1

remove class="ckeditor" , it might have triggered ckeditor initialization

answered Apr 28 '14 at 10:06

vkGunasekaran

6,668
7
50
59

score 1 · Answer 16 · answered Oct 20 '14 at 11:00

1

This functions works for me in CKEditor version 4.4.5, it does not have any memory leaks

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

// call this function as below

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

CKEditor_Render(id);

answered Oct 20 '14 at 11:00

Shujaat Kagathra

120
1
9

there is little mistake in this code `if (CKEDITOR.instances.instance) {` and inside if statement should be just `instance`. – smarteist Jul 30 '23 at 09:46

ramkam · Answer 17 · 2010-09-16T17:41:33.453

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.

Nicholas Maietta · Answer 18 · 2010-12-19T20:15:26.440

I learned that

delete CKEDITOR.instances[editorName];

by itself, actually removed the instance. ALL other methods i have read and seen, including what was found here at stackoverflow from its users, did not work for me.

In my situation, im using an ajax call to pull a copy of the content wrapped around the and 's. The problem happens to be because i am using a jQuery .live event to bind a "Edit this document" link and then applying the ckeditor instance after success of the ajax load. This means, that when i click another link a link with another .live event, i must use the delete CKEDITOR.instances[editorName] as part of my task of clearing the content window (holding the form), then re-fetching content held in the database or other resource.

score 1 · Answer 19 · answered Apr 12 '11 at 21:31

1

I hade the same problem with a jQuery Dialog.

Why destroy the instance if you just want to remove previous data ?

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

answered Apr 12 '11 at 21:31

Mathieu

11
1

score 1 · Answer 20 · answered Jul 07 '11 at 15:10

I chose to rename all instances instead of destroy/replace - since sometimes the AJAX loaded instance doesn't really replace the one on the core of the page... keeps more in RAM, but less conflict this way.

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

score 1 · Answer 21 · edited Feb 06 '12 at 05:03

I am in the situation where I have to controls that spawn dialogs, each of them need to have a ckeditor embedded inside these dialogs. And it just so happens the text areas share the same id. (normally this is very bad practice, but I have 2 jqGrids, one of assigned items and another of unassigned items.) They share almost identical configuration. Thus, I am using common code to configure both.

So, when I load a dialog, for adding rows, or for editing them, from either jqGrid; I must remove all instances of CKEDITOR in all textareas.

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

    }
});

This will loop over all textareas, and if there is a CKEDITOR instance, then destroy it.

Alternatively if you use pure jQuery:

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

    }
});

score 0 · Answer 22 · answered Jul 31 '12 at 17:39

For those using the jquery "adapter" and having trouble (as I was), as super hackish yet working solution is to do something like this:

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

});

The key point being this part:

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

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

This fixes the problem with the editor text not being visible the next time you open the dialog. I realise this is very hackish, but considering that most of these are going to be used for admin tools, I don't think that's as big a concern as it normally would be.. and this works, so hopefully it will save someone some time ;)

score 0 · Answer 23 · edited Dec 15 '12 at 11:01

This is the fully working code for jquery .load() api and ckeditor, in my case I am loading a page with ckeditor into div with some jquery effects. I hope it will help you.

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

score 0 · Answer 24 · answered Apr 15 '13 at 17:54

Its pretty simple. In my case, I ran the below jquery method that will destroy ckeditor instances during a page load. This did the trick and resolved the issue -

JQuery method -

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

       });

That's it. I hope it helps you.

Cheers, Sirish.

score 0 · Answer 25 · answered Jan 04 '15 at 15:53

CKeditor 4.2.1

There is a lot of answers here but for me I needed something more (bit dirty too so if anyone can improve please do). For me MODALs where my issue.

I was rendering the CKEditor in a modal, using Foundation. Ideally I would have destoryed the editor upon closing, however I didn't want to mess with Foundation.

I called delete, I tried remove and another method but this was what I finally settled with.

I was using textarea's to populate not DIVs.

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

this was my method to return my specific formatting, which you might not want.

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

score 0 · Answer 26 · edited Mar 05 '16 at 18:06

0

Try this:

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

edited Mar 05 '16 at 18:06

Ibrahim Khan

20,616
7
42
55

answered Mar 05 '16 at 10:26

Tunde Pizzle

787
1
9
18

score 0 · Answer 27 · answered Nov 08 '10 at 19:28

I had the same problem where I was receiving a null reference exception and the word "null" would be displayed in the editor. I tried a handful of solutions, including upgrading the editor to 3.4.1 to no avail.

I ended up having to edit the source. At about line 416 to 426 in _source\plugins\wysiwygarea\plugin.js, there's a snippet like this:

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

In FF at least, the iframe isn't completely instantiated by the time it's needed. I surrounded the rest of the function after that line with a setTimeout function:

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

The text renders consistently now in the modal dialogs.

Leafy · Answer 28 · 2011-07-29T17:37:00.357

To support dynamic (Ajax) loading of forms (without page refreshes between) which contain textareas with the same (same form is called again) or different ID's (previously unloaded form) and convert them to CKEditor elements I did the following (using the JQuery adapter):

After the page has finished every Ajax call that delivers a textarea to be converted, I make a call to the following function:

setupCKeditor()

This looks like this (it assumes your textareas to be converted to 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);

            });

    }


}

I should mention that the line:

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

could (and should) be simply:

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

however I found that the editor would often show the correct content for a second after loading and them empty the editor of the desired content. So that line with the callback code forces the CKEditor content to be the same as the originating textarea content. Causes a flicker when used. If you can avoid using it, do so..

score 0 · Answer 29 · answered Dec 14 '11 at 11:23

I had exactly the same problem like jackboberg. I was using dynamic form loading into jquery dialogs then attaching various widgets (datepickers, ckeditors etc...). And I tried all solutions noted above, none of them worked for me.

For some reason ckeditor only attached the first time I loaded form, the second time I got exactly the same error message jackboberg did.

I've analyzed my code and discovered that if you attach ckeditor in "mid-air" that is while form content is still not placed into dialog, ckeditor won't properly attach its bindings. That is since ckeditor is attached in "mid-air", second time you attach it in "mid-air"... poof ... an error is thrown since the first instance was not properly removed from DOM.

This was my code that ptoduced the 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();

This is the fix that worked:

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

score 0 · Answer 30 · answered Dec 21 '11 at 17:56

I ran into this exact same thing and the problem was that the wordcount plugin was taking too long to initialize. 30+ seconds. The user would click into the view displaying the ckeditor, then cancel, thereby ajax-loading a new page into the dom. The plugin was complaining because the iframe or whatever contentWindow is pointing to was no longer visible by the time it was ready to add itself to the contentWindow. You can verify this by clicking into your view and then waiting for the Word Count to appear in the bottom right of the editor. If you cancel now, you won't have a problem. If you don't wait for it, you'll get the i.contentWindow is null error. To fix it, just scrap the plugin:

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

If you need a word counter, register for the paste and keyup events on the editor with a function that counts the words.

score -1 · Answer 31 · edited Jun 25 '14 at 15:14

-1

you don't need to destroy the object CKeditor, you need remove() :

Change this :

CKEDITOR.instances['textarea_name'].destroy();

for that :

CKEDITOR.remove(CKEDITOR.instances['textarea_name']);

edited Jun 25 '14 at 15:14

Sergi Juanola

6,531
8
56
93

answered Jun 25 '14 at 14:54

I4n

1

score -1 · Answer 32 · answered Aug 04 '18 at 06:52

If you know the name of the editor then it is pretty simple to do this..

For example if the name of the editor is editor1 (this is the id of div or textarea) then you simply check like this

if(CKEDITOR.instances['editor1']){
   // Instance present
}else{
   // Instance not present 
}

If you want to get the number of initialized editor's then do like the below

for(let inst of CKEDITOR.instances){
   // inst is an Obj of editor instance
   // inst.name will give the name of the editor instance
}

CKEditor instance already exists

32 Answers32

Linked

Related