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

[Walter Schwarz]

Hello,

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: ​http://jsfiddle.net/wschwarz/ktw9utcm/

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.

[Piotrek Koszuliński]

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.

[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.

[Piotrek Koszuliński]

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 ​https://github.com/ckeditor/ckeditor-dev).

[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: ​http://jsfiddle.net/ktw9utcm/7/

[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: ​http://jsfiddle.net/wschwarz/ktw9utcm/

[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.