Opened 5 years ago

Last modified 5 years ago

#12281 confirmed Bug

Bug in Core.Editable isInline() function when using the editor inside an iFrame

Reported by: Walter Schwarz Owned by:
Priority: Normal Milestone:
Component: Core : Editable Version:
Keywords: Cc:



For various reasons I need to use the CKEditor inside an iFrame that is populated with content via JavaScript. This seems to cause a bug in the isInline() function within Core.Editable, where the document of the editor is compared with the CKEDITOR.document to conclude if the editor is inline or not. Because the editor is located inside the iFrame, and the iFrame document does not match the CKEDITOR.document, the result is always false. This causes an issue with the magicline plugin that relies on this to calculate the position of the line. Its very likely that other plugins are also affected that use the isInline() function.

I made a JSFiddle to demonstrate the issue:

The solution I applied is also included there as a comment, which checks if the 'cke_editable_inline' class is applied onthe editor to decide if it is inline or not. Un-comment it to see how the isInline() function returns the correct value and the magicline is positioned correctly. This might not be the ideal solution but it worked for me. If a better fix is available please let me know.

Change History (7)

comment:1 Changed 5 years ago by Piotrek Koszuliński

Keywords: isInline removed
Resolution: invalid
Status: newclosed
Version: 4.4.3

The problem occurs because you use CKEditor loaded in the parent frame to initialise editor in the iframe. You should load CKEditor script in the frame in which you initialise editors. The isInline() method won't be the only problem when initilising editor in an iframe - I expect number of other issues.

comment:2 Changed 5 years ago by Walter Schwarz

I need the editor toolbar outside of the iFrame. Loading the CKEditor script inside the iFrame and then using the sharedSpaces plugin to inject the toolbar in a DIV outside of the iFrame won't work because it searches for the DIV via ID in the CKEDITOR.document which in this case will be the iFrame.

Using it the way I do seems to work fine. I had no other issues except the trouble with the isInline() method, and I do use several plugins. I think changing the isInline() method makes CKEditor more versatile, which is why I wanted to share this with the community.

comment:3 Changed 5 years ago by Piotrek Koszuliński

Resolution: invalid
Status: closedreopened

I was aware of this use case, but I was pretty sure that there are many problems with it. I know that others had tried but with rather unsatisfactory results. On which browsers have you tested this?

I'm reopening this ticket, because if it may make editor usable in this context at least in a subset of browsers and configurations it makes sense to fix this. However, this feature (initialising editors inside iframes) is not officially supported so a patch will need to be provided by the community (by a pull request for

comment:4 Changed 5 years ago by Piotrek Koszuliński

Status: reopenedconfirmed

comment:5 Changed 5 years ago by Walter Schwarz

I tested in the following browsers and it works fine:

  • Chrome 36
  • Firefox 31
  • Safari for Windows 5.1.7
  • IE 11

I also updated the fiddle to use 2 editor instances (I use multiple instances in my application too), to show that it still works as expected:

comment:6 Changed 5 years ago by Walter Schwarz

Found a better fix for the isInline() method issue. I turns out the editor instance has a 'elementMode' property that tells it it is inline or not. So I cannot see why the original method goes through the trouble of comparing documents. There might be a good reason but I cannot find it, everything seems to work fine when replacing the method. See the updated fiddle:

comment:7 Changed 5 years ago by Piotrek Koszuliński

Element mode has a slightly different meaning. It means that editor was created by CKEDITOR.inline. But editable.isInline() will return true also for divarea, because even though editor was created by CKEDITOR.replace its editable is in the same document.

Note: See TracTickets for help on using tickets.
© 2003 – 2019 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy