Mirror editor if using divarea with a JavaScript loader

[Alexander Ebert]

I have discovered a pretty weird issue causing the creation of a double editor, let's call it "Mirror Editor".

The setup:

• CKEditor 4 (confirmed for 4.0 - 4.3, including custom built from Git)
• JavaScript loader (self-made/head.js/LABjs)
• jQuery Adapter
• divarea Plugin

I need to make use of a JavaScript loader because CKEditor is sometimes dynamically loaded from a remote host, forcing me to use a dependent loader with callback. It is worth noting, that this issue is raised even if the files are loaded from the same host.

The issue is caused by a race condition, we're creating an CKEditor instance by using a custom config passed to $(...).ckeditor($config). Meanwhile the other scripts on the page finished executing and CKEditor's callbacks for domReady are executed. One of these callbacks invokes inlineAll() which normally isn't much of a big deal, but since we're using the divarea plugin, it happens to sometimes trigger it on the editor in creation.

As a result we end up with two editors (the 2nd one has a generic ID and element.$ = div.cke_wysiwyg_div) which are unaware of each other and ultimately breaking everything, even the toolbars overlap.

It is worth noting, that the issue is not always reproducible, usually 1 of 3 page loads result in the broken editor(s).

To solve this issue I'm setting CKEDITOR.disableAutoInline = true; immediately after CKEditor has loaded to prevent this double creation.

You can see this issue on the attached screenshot, the editor with the grayed-out buttons is the mirror editor (2nd created) and you can clearly see the "real" editor hidden below it. Once it loses focus, the 2nd editor becomes invisible.

[Piotrek Koszuliński]

Thanks for this report. We'll try to reproduce it, but I remember that I've seen similar issue once and it makes sense that there can be a race condition between divarea and inlineAll().

Have you got a sample on which you reproduced this? It would help us to save some time. Also, on which browsers does it happen most often?

[Alexander Ebert]

I have no simple case to reproduce it (discovered it in our forum software Burning Board 4), but I'm definitely sure this is a race condition. Using a timeout of at least 200ms prevented it from happening and I was no longer able to reproduce it.

It was possible to reproduce this with Chrome 30/31, Firefox 25, Opera 15, Internet Explorer 9/11. Unfortunately it was not possible to draw a connection between cold cache or simple page visit.

I was not able to reproduce this in a simple HTML page, but I guess this is due to CKEditor running entirely alone and the browser is not busy with any other DOM operation.

About the test case, do you simply want to try it out yourself or do you require an environment to work with?

[Jakub Ś]

About the test case, do you simply want to try it out yourself or do you require an environment to work with?

What we are asking for is simplified HTML file (with js if it is needed) that can put into samples folder and will show this issue.

[Piotrek Koszuliński]

@j.swiderski: I can imagine that trimming down a full page to a simple sample in this case may be extremely hard, so I'm planning to check it using a lower level unit test.

@dtdesign: I'll let you know if I'm able to reproduce this without more details.

[Piotrek Koszuliński]

It's 5 months since my last comment and I still have this opened in my browser :|. I must finally find time for it.