CKEditor
HTML
<script src="http://ckeditor.com/apps/ckeditor/4.3/ckeditor.js"></script>
<p>
This fiddle demonstrates a <b>Chrome only</b> issue with the CKEditor 4.3 <a href="http://docs.ckeditor.com/#!/guide/dev_inline">inline editor</a> where the editor fails to initialize properly if the container element is initially hidden. Click the "Toggle panel" button below to show a panel that contains a ckeditor instance:
</p>
<button id="toggle" type="button">Toggle panel</button>
<div id="panel">
<h3>Panel</h3>
<p>This panel contains an inline ckeditor instance (below).</p>
<div id="editor1" contenteditable="true">
<b>Inline Editing in Action!</b>
<p>Ideally, this should be editable - and it is! Except in Chrome... :-(.</p>
<p>You will notice that:
<ul>
<li>The CKEditor toolbar shows up if you click in here, but all the buttons are grayed out.</li>
<li>The <code>contenteditable</code> attribute on the div got set to "false", even though it was initially "true".
<ul>
<li>Forcing the <code>contenteditable</code> attribute to true using jQuery when showing the panel does not help. It does change the behavior somewhat - it enables the clipboard buttons in the toolbar, and those appear to be functional, but the rest of the buttons are still disabled, and you still can't type inside the editor.</li>
</ul>
</li>
</ul>
</p>
</div>
</div>
CSS
#panel {
border: 1px solid #ccc;
margin-top: 1em;
padding: 1em;
display: none;
}
#editor1 {
border: 1px solid #ddd;
margin-top: 1em;
}
JavaScript
$('#toggle').click(function () {
$('#panel').toggle();
// Nice try, but no cookie :-(
//$('#editor1').attr('contenteditable', 'true');
});