I'm trying to get acquainted With CKEditor. I took one of the samples ("Replace DIV elements on the fly") and changed it a little, so that editor was opened on single click instead of double click. Here is the complete source of my HTML file:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Test</title> <script type="text/javascript" src="ckeditor/ckeditor.js"></script> <script type="text/javascript"> //<![CDATA[ var editor = null; window.onload = function () { var elems = document.getElementsByTagName('div'); for (var i = 0; i < elems.length; ++i) { if (elems[i].className == 'editable') { elems[i].onclick = function () { if (editor) editor.destroy(); editor = CKEDITOR.replace(this); } } } } //]]> </script> </head> <body> <h2>CKEditor Test</h2> <div class="editable">Text in div 1</div> <div class="editable">Text in div 2</div> </body> </html>
When I test this code in Opera, IE or Chrome, everything's fine: when I click any of the two DIVs, the opened editor closes (if it was opened) and then reopened at the clicked DIV. But in Firefox when I click (quickly enough) the second DIV, then the first DIV, — the second DIV just does not reappear on the screen and remains invisible. (This is also reproducable if click first DIV then second one, but the distance for moving the mouse is much larger in this scenario, so it's harder to do quickly enough.)
I checked with Firebug and saw that when CKEditor is opened, the DIV acquires special style (display: none, in particular), and when the editor is destroyed the DIV's style is removed. But if I click quickly enough (~0,5 seconds or less between successive clicks) the style is not removed, so the DIV remains hidden.
I checked Firefox 3.6.13 and 4.0.1, both have the same problem. What can I do to avoid this problem? Except for adding setTimeout, of course.
Added:
I have just checked the original "Replace DIV elements on the fly" sample without any modification: though it is a little bit harder to make double-clicks fast enough, the problem can also be reproduced there.
Re: Replaced DIV remains invisible in Firefox when closing C
Thanks!