Ckeditor4: ckeditor 4.7.0 on Chrome: insertElement: Cannot read property 'checkReadOnly' of undefined at f.insertElementIntoRange

Created on 9 Jun 2017 · 8Comments · Source: ckeditor/ckeditor4

Hi, I've got a window opened from where the script resides, window.opener.current_ed = "ck_editor" and try to insert some html:

var HTMLTextField = " var element = window.opener.CKEDITOR.dom.element.createFromHtml( HTMLTextField );

var oEditor = window.opener.CKEDITOR.instances[window.opener.current_ed];

oEditor.insertElement(element);

I got this error on

Cannot read property 'checkReadOnly' of undefined at f.insertElementIntoRange (/ckeditor470/ckeditor.js:363)

the error occurs on oEditor.insertElement(element);

with 4.6.0, everything worked fine.

It seems this only happens on Chrome (Version 59.0.3071.86), FF, IE & Edge work fine

any ideas?

best regards

Bernd

invalid

Source

bjbmedia

Most helpful comment

In my case, I didn't have selectable range when I was trying to insert the html. My fix:

var sel = editor.getSelection();
var range = sel.getRanges()[0];

// no range, means the editor is empty. Select the range.
if (!range) {
  range = editor.createRange();
  range.selectNodeContents( editor.editable() );
  sel.selectRanges( [ range ] );
}

editor.insertHtml(html);

sitorush on 20 Mar 2018

👍6

All 8 comments

@bjbmedia You are most likely opening CKEditor in a popup but in order to reproduce a bug, we ask you to provide reduced, working HTML sample so that we work on the same code as you do and not guess in dark.

beatadelura on 12 Jun 2017

@beatadelura ,
thx, I can't reproduce the error at the moment, suddenly all went fine. No idea why, best regards

Bernd

bjbmedia on 12 Jun 2017

@bjbmedia Thanks for the information!

beatadelura on 12 Jun 2017

Got same issue:

ckeditor.js:674 Uncaught TypeError: Cannot read property 'checkReadOnly' of undefined
at Array. (ckeditor.js:674)
at $.onShow (ckeditor.js:779)
at Object.onShow (ckeditor.js:28)
at $.show (ckeditor.js:781)
at $.open (ckeditor.js:791)
at $. (ckeditor.js:790)
at ckeditor.js:26

rijin-newage on 23 Feb 2018

In my case, I didn't have selectable range when I was trying to insert the html. My fix:

var sel = editor.getSelection();
var range = sel.getRanges()[0];

// no range, means the editor is empty. Select the range.
if (!range) {
  range = editor.createRange();
  range.selectNodeContents( editor.editable() );
  sel.selectRanges( [ range ] );
}

editor.insertHtml(html);

sitorush on 20 Mar 2018

👍6

I am also seeing this problem.

In my case, the suggestion above also resolved it. CkEditor 4.9.1.

What's weird in my case is I am unable to reproduce the error on my development machine but can on production.

The only major difference between the two is that production machine is an SSL site while my development copy is running on port 80. I'm not sure if that observation is helpful.

Yermo on 8 Apr 2018

Any help!! I got the same issue,
Cannot read property 'checkReadOnly' of undefined
at ckeditor.js:389
at $.insertHtml (ckeditor.js:359)
at $. (ckeditor.js:369)
at a.m (ckeditor.js:10)
at a. (ckeditor.js:12)
at a.CKEDITOR.editor.CKEDITOR.editor.fire (ckeditor.js:13)
at a.insertHtml (ckeditor.js:270)
at bindCkEditor (formbuilder?LMSFormBuilderID=37:2697)
at HTMLButtonElement. (formbuilder?LMSFormBuilderID=37:2774)
at HTMLButtonElement.dispatch (jquery.min.js:3)
CKEDITOR.instances.admin_messagebody.insertHtml('<p>This is a new paragraph.</p>');

sridhargoshika on 30 Apr 2018

👎1

In my case, I didn't have selectable range when I was trying to insert the html. My fix:

var sel = editor.getSelection();
var range = sel.getRanges()[0];

// no range, means the editor is empty. Select the range.
if (!range) {
  range = editor.createRange();
  range.selectNodeContents( editor.editable() );
  sel.selectRanges( [ range ] );
}

editor.insertHtml(html);

what if editor is not empty ? how add html to selected range ?