CKeditor jquery ajax issues

Hi guys,

Been looking and trying different things mentioned on other threads but no joy.
The issue is that I load different forms containing textareas into the screen via ajax.
These forms can contain textareas with the same id (not in the same form and not in the screen at the same time).
All text areas that i want to use ckeditor on have the class 'wysiwyg'.
The problem is that when the form gets redrawn via ajax, the textareas which have an id that was previously used (in a previous load) fail, and i get the "i.contentWindow is null" error.

This is my code after hashchange view reload:

 var $editors = $(".wysiwyg");
    if ($editors.length) {
        $editors.each(function() {
            var editorID = $(this).attr("id");
            var instance = CKEDITOR.instances[editorID];
            if (instance) { delete CKEDITOR.instances[editorID]; instance=null; }
        });
    }   
    
    $('.wysiwyg').ckeditor({
        resize_enabled: false,
        toolbar_Full: [ 
                          ['Format','Bold','Italic','Underline','Strike','TextColor','-','NumberedList','BulletedList','-','RemoveFormat'],
                          ['Link','Unlink','-','Image','Flash','Table'],
                          ['Cut','Copy','Paste','PasteText','PasteFromWord','-','SpellCheck'],
                          ['Maximize','-','Source']
               ] 
       });

I opted for delete instead of remove() or destroy() as i kept getting the duplicate instance error. With delete that error is gone, but i cant get it working.

What am i missing?

Any help or suggestions would be greatly appreciated!

Tue, 05/08/2012 - 19:34

dantelo

Joined: 06/05/2012

Posts: 5

Re: CKeditor jquery ajax issues

can anyone help?

Tue, 05/08/2012 - 20:56

alfonsoml

Joined: 31/12/2006

Posts: 3735

Re: CKeditor jquery ajax issues

The only correct way to remove a CKEditor instance is by using its destroy method.
If you use delete you're just removing a reference to it in an array, but the rest of references remain there and they can generate problems like this one or just memory leaks.

This code should work unless you have done something really strange and unexpected

if ($editors.length) {
        $editors.each(function() {
            var editorID = $(this).attr("id");
            var instance = CKEDITOR.instances[editorID];
            if (instance) instance.destroy(true);
        });
    }

I guess that if http://dev.ckeditor.com/ticket/8226 is ever fixed this kind of problem will be moot, even if you're not aware of the "noUpdate" parameter.

Tue, 05/08/2012 - 21:19

dantelo

Joined: 06/05/2012

Posts: 5

Re: CKeditor jquery ajax issues

Thanks for the reply!
I had tried that originally, and trying it again... but i get:

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

i.contentWindow is null
getFrameDocument()ckeditor.js (line 21)
getSnapshotData()ckeditor.js (line 103)
init(o=Object { name="getSnapshot", sender={...}, editor={...}})ckeditor.js (line 129)
getUrl(o=Object { _={...}, elementMode=1, element={...}, more...}, p=undefined, q=function(), r=function())ckeditor.js (line 6)
getUrl(h="getSnapshot", i=undefined, j=Object { _={...}, elementMode=1, element={...}, more...})ckeditor.js (line 6)
hasListeners(b="getSnapshot", c=undefined)ckeditor.js (line 7)
u()ckeditor.js (line 26)
setReadOnly()ckeditor.js (line 27)
init()ckeditor.js (line 129)
getUrl(o=Object { _={...}, elementMode=1, element={...}, more...}, p=Object {}, q=function(), r=function())ckeditor.js (line 6)
getUrl(h="mode", i=Object {}, j=Object { _={...}, elementMode=1, element={...}, more...})ckeditor.js (line 6)
hasListeners(b="mode", c=Object {})ckeditor.js (line 7)
load()ckeditor.js (line 102)
[Break On This Error]    

...;return j?new d.node(j):null;},getChildCount:function(){return this.$.childNodes...

Tue, 05/08/2012 - 21:21

dantelo

Joined: 06/05/2012

Posts: 5

Re: CKeditor jquery ajax issues

I've tried it before and after the form with the editor gets removed from screen. And no joy !

Tue, 05/08/2012 - 22:39

dantelo

Joined: 06/05/2012

Posts: 5

Re: CKeditor jquery ajax issues

Finally found a solution... had to iterate the instances and not the form elements...

for(var instanceName in CKEDITOR.instances) {
       CKEDITOR.instances[instanceName].destroy();
    }    
    
   
    $(".wysiwyg").ckeditor({
        resize_enabled: false,
        toolbar_Full: [ 
                          ['Format','Bold','Italic','Underline','Strike','TextColor','-','NumberedList','BulletedList','-','RemoveFormat'],
                          ['Link','Unlink','-','Image','Flash','Table'],
                          ['Cut','Copy','Paste','PasteText','PasteFromWord','-','SpellCheck'],
                          ['Maximize','-','Source']
               ] 
       });