Using IE8, when my page (ajax, vaaadin) loads CKEditor 3.3.1 instance(s) initially, pressing any button causes all of the editors to disappear.
However, if I load the page and click the Reload button, this never happens, so it's something about the initial load. In IE8, I ran a diff on the HTML generated per the developer tools, and the initial load shows this snippet:
but on refresh, it shows a more correct look (and what I see in Firefox 3.5):
This does not happen at all on FF 3.5, Opera 10, Chrome/Safari 5, only IE. Any thoughts on how this might be resolved?
However, if I load the page and click the Reload button, this never happens, so it's something about the initial load. In IE8, I ran a diff on the HTML generated per the developer tools, and the initial load shows this snippet:
<STYLE>.cke_skin_kama {
VISIBILITY: hidden
}
</STYLE>but on refresh, it shows a more correct look (and what I see in Firefox 3.5):
<style>.cke_skin_kama{visibility:hidden;}</style>This does not happen at all on FF 3.5, Opera 10, Chrome/Safari 5, only IE. Any thoughts on how this might be resolved?
Re: CKEditor 3.3.1 on IE8 editors disappear on button click
When I click on the button without doing a browser reload on IE8, I compared the original HTML with what is then rendered and found that my DIV elements were there (I replace DIV elements, not TEXTAREA), but that the CKEditor TABLEs were not present that appear be inserted right after my DIVs.
What might cause the TABLEs to disappear, but not disappear if I click the browser reload first?
Here's an example of a TABLE that was present originally, but then disappeared, from IE8's developer tools:
<TABLE class=cke_editor role=presentation border=0 cellSpacing=0 cellPadding=0> <TBODY> <TR role=presentation unselectable="on"> <TD id=cke_top_PID5 class=cke_top role=presentation unselectable="on"> <DIV class=cke_toolbox role=toolbar aria-labelledby=cke_44 unselectable="on"><SPAN id=cke_44 class=cke_voice_label unselectable="on">Toolbar</SPAN><SPAN id=cke_45 class=cke_toolbar role=presentation unselectable="on"><SPAN class=cke_toolbar_start unselectable="on"></SPAN><SPAN class=cke_rcombo unselectable="on"><SPAN id=cke_46 class="cke_styles cke_off" unselectable="on"><SPAN id=cke_46_label class=cke_label unselectable="on">Styles</SPAN><A aria-haspopup=true hideFocus onkeydown="CKEDITOR.tools.callFunction( 44, event, this );" title="Formatting Styles" role=button tabIndex=-1 aria-labelledby=cke_46_label onclick="CKEDITOR.tools.callFunction(43, this); return false;" aria-describedby=cke_46_text href="javascript:void('Styles')" unselectable="on"><SPAN unselectable="on"><SPAN id=cke_46_text class="cke_text cke_inline_label" unselectable="on">Styles</SPAN></SPAN><SPAN class=cke_openbutton unselectable="on"></SPAN></A></SPAN></SPAN><SPAN class=cke_separator role=separator unselectable="on"></SPAN><SPAN class=cke_toolgroup role=presentation unselectable="on"><SPAN class=cke_button unselectable="on"><A hideFocus onkeydown="return CKEDITOR.ui.button._.keydown(27, event);" id=cke_47 class="cke_off cke_button_vaadinsave" onfocus="return CKEDITOR.ui.button._.focus(27, event);" title=Save role=button tabIndex=-1 aria-labelledby=cke_47_label onclick="CKEDITOR.tools.callFunction(45, this); return false;" href="javascript:void('Save')" ? unselectable="on"><SPAN style="BACKGROUND-IMAGE: url(http://localhost/VaadinCKEditor/VAADIN/widgetsets/org.vaadin.openesignforms.ckeditor.widgetset.VaadinCKEditorWidgetset/ckeditor/../images/disk.png?t=A5AB4B6); BACKGROUND-POSITION: 0px 0px" class=cke_icon unselectable="on"> </SPAN><SPAN id=cke_47_label class=cke_label unselectable="on">Save</SPAN></A></SPAN></SPAN><SPAN class=cke_toolbar_end unselectable="on"></SPAN></SPAN></DIV><A id=cke_48 class=cke_toolbox_collapser title="Collapse Toolbar" tabIndex=-1 onclick=CKEDITOR.tools.callFunction(46) unselectable="on"><SPAN unselectable="on">▲</SPAN></A></TD></TR> <TR role=presentation> <TD style="HEIGHT: 200px" id=cke_contents_PID5 class=cke_contents role=presentation><IFRAME style="WIDTH: 100%; HEIGHT: 100%" id=scayt_1 title="Rich text editor, PID5, press ALT 0 for help." tabIndex=0 src="javascript:void(function(){document.open()%3Bdocument.close()%3B}())" frameBorder=0 allowTransparency _cke_expando="51" ignoreDomainNames="true" sLang="en_US" userDictionaryName customDictionaryIds widgetId="scayt_1"></IFRAME></TD></TR> <TR role=presentation unselectable="on"> <TD id=cke_bottom_PID5 class=cke_bottom role=presentation unselectable="on"><SPAN id=cke_path_PID5_label class=cke_voice_label unselectable="on">Elements path</SPAN> <DIV id=cke_path_PID5 class=cke_path role=group aria-labelledby=cke_path_PID5_label unselectable="on"><SPAN class=cke_empty unselectable="on"> </SPAN></DIV> <DIV class=cke_resizer title="Drag to resize" onmousedown="CKEDITOR.tools.callFunction(42, event)" unselectable="on"></DIV></TD></TR></TBODY></TABLE> <STYLE>.cke_skin_kama { VISIBILITY: hidden } </STYLE> </SPAN></SPAN><SPAN style="POSITION: absolute" role=presentation tabIndex=-1 _cke_expando="50"></SPAN></SPAN>Re: CKEditor 3.3.1 on IE8 editors disappear on button click