Opened 6 years ago

Last modified 5 years ago

#13889 confirmed Bug

Error on drag/drop images in inline editor inside an iframe

Reported by: Bernd Bäumler Owned by:
Priority: Normal Milestone:
Component: Core : Editable Version: 4.5.0
Keywords: Cc:



i have got a parent page which loads the ckeditor script and has an iframe in which the contenteditable divs are.

in this configuration, dargging and dropping an image gives an error:

TypeError: a is undefined: doc:a.document

line: extractHtmlFromRange:function(a,b){var c=w,d={range:a,doc:a.document}

the image is not moved, but sometimes "null" is inserted where the image should be.

my setup:

parent page with iframe id=ifr and the following code:

... load ckeditor ... <iframe id="ifr" src="iframe.php"></iframe>



var myFrame = document.getElementById('ifr'); ifr.onload=function(){

var contenteditableElement = myFrame.contentWindow.document.getElementById('editor1')

CKEDITOR.inline( contenteditableElement, {

removePlugins: 'maximize,resize'

} );

} onload ifr


iframe.php with <div id="editor1" contenteditable></div> and content

If I put the ckeditor script directly into iframe.php, everything works fine

best regards


Attachments (2)

mytest.html (860 bytes) - added by Jakub Ś 5 years ago.
mytest2.html (513 bytes) - added by Jakub Ś 5 years ago.

Download all attachments as: .zip

Change History (6)

comment:1 Changed 6 years ago by Bernd Bäumler


The sample above works fine, without error. The error only occurs when you add a second inline editor:

var contenteditableElement2 = myFrame.contentWindow.document.getElementById('editor2')

var ed2 = CKEDITOR.inline( contenteditableElement2);

TypeError: range is undefined doc: range.document


extractHtmlFromRange: function( range, removeEmptyBlock ) {

var helpers = extractHtmlFromRangeHelpers,

that = {

range: range, doc: range.document


in core/editable.js



comment:2 Changed 5 years ago by Bernd Bäumler


I put an example online:

drag and drop the image will result in an error.

This bug was introduced with 4.5.0, with 4.4.8, everything worked fine.

Last edited 5 years ago by Bernd Bäumler (previous) (diff)

comment:3 Changed 5 years ago by Bernd Bäumler

Component: GeneralCore : Editable
Keywords: range added

Changed 5 years ago by Jakub Ś

Attachment: mytest.html added

Changed 5 years ago by Jakub Ś

Attachment: mytest2.html added

comment:4 Changed 5 years ago by Jakub Ś

Keywords: range drag drop inline iframe removed
Status: newconfirmed

Please see attached files.

When you try mytest2.html (native elements) than D&D in editable area or between areas, it works. When on the other hand you try mytesthtml.html with editors then you get errors:

  1. When you try D&D image in second editor, image ends up in firs editor.
  2. When you try D&D in first editor you are getting "Cannot read property 'document' of undefined" in editable.js, line:671. Firefox shows range is undefined, editable.js Line:1543.
  3. When you try to D&D from first editor to the second one, you get multiple "Error code: range-startcontainer" and "Cannot read property 'document' of undefined" in editable.js, line:671.
  4. When you try to D&D from second editor into first it works.
Note: See TracTickets for help on using tickets.
© 2003 – 2021 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy