Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CKEditor + IE7+8 'null or not an object' error

My problem is that I'm using the CKEditor 3.4 plugin for jQuery, and it's giving me an error in IE 7+8 when executing a $(selector).val(html) call on the editor:

The error: 'this.$.innerHTML' is null or not an object

...which when run in the debugger, points to this line of code in the huge CKEditor.js:

getHtml:function(){var i=this.$.innerHTML;return c?i.replace(/<\?[^>]*>/g,''):i;}

...which translates to this in the source:

getHtml : function()
{
    var retval = this.$.innerHTML;
    // Strip <?xml:namespace> tags in IE. (#3341).
    return CKEDITOR.env.ie ? retval.replace( /<\?[^>]*>/g, '' ) : retval;
},

My offending code (stripped down, but still giving the error):

var editor_data = $("textarea#body").val();
$("textarea#body").val(editor_data);

... and the textarea code for posterity:

<textarea name="body" rows="15" cols="50" class="wysiwyg" id="body"></textarea>

I've tried reproducing in jsFiddle in IE8, but the strange thing is that it works as intended there. I'd love to also provide a working sample but I unfortunately cannot for reasons outside my control.

I've also tried this fix, and it cleared up the error issue, but after that setData did not work as intended and just overwrote the editor contents with nothing. I'll admit this problem+fix is a bit over my head...: http://dev.ckeditor.com/ticket/4566

(Sorry, long post :S) I've also tried to use the direct JavaScript API into CKEditor (abandoning the jQuery integration) and it threw the same error.

Anyone have anything they'd like me to try to fix this issue, or have any hunches of what it might be? It would be much appreciated!

like image 999
mmoriar1 Avatar asked Aug 19 '10 04:08

mmoriar1


1 Answers

Personally I'm not a fan of the existing answer that consists of modifying the source code because as soon as you update ckEditor, then you have to remember to modify the source yet again. I was having the same problem as the original poster and found a fix that is considered a hack, but totally usable. Simply, a Try/Catch made it all nice and happy in IE8. Now to test in IE7. The other bonus of this fix is that you're not left with blank data when it fails but that you get actual content you were trying to retrieve.

var editor = $('textarea.editor').ckeditorGet();
var vPageContent = "";
try{
    vPageContent = editor.getData();//function call fails here
} catch(err){
    vPageContent = editor.getData();//but will work here
}
like image 143
Duncan Nisbett Avatar answered Nov 01 '22 18:11

Duncan Nisbett