CKEditor inline does not initialize properly in Chrome if the container element is initially hidden

[Sergey Krilov]

If the editor is inside a container element which is initially hidden, the editor appears disabled and the contents are not editable when you show the container.

The bug is demonstrated in this fiddle:

​http://jsfiddle.net/jfuya/11/

Note that you can click inside the editor div and the ckeditor toolbar shows up, but all the buttons are grayed out, and you can't actually edit the contents. No JavaScript errors show up in the console.

The issue appears to be Chrome only (tested also in Firefox and IE - both seem to work fine). I'm using Windows 7 (though I'm not sure it makes a difference).

Using CKEDITOR.disableAutoInline does not work either, as demonstrated in this fiddle:

​http://jsfiddle.net/eEsG4/

However, it looks like the issue is isolated to the inline editor. This alternative fiddle uses the standard CKEditor, and it works fine in Chrome:

​http://jsfiddle.net/yMTD5/2/

You can easily run into this issue if the editor is inside a jQuery UI tab, or a collapsed panel of any sort. People having been using all sorts of hacks and workarounds for this, including delaying initialization of the editor until the container becomes visible, or destroying/recreating all inline editors. Here are some I found:

​http://ckeditor.com/forums/CKEditor/Solved-Chrome-Toolbar-buttons-grayed-out-for-INLINE-editor

​http://stackoverflow.com/questions/21202684/ckeditor-inline-editing-on-jquery-ui

Apologies if this is a duplicate. I found some similar issues that are old and probably predate inline editing capabilities (#5956, #6174), but I wasn't able to find anything that's specific to the CKEditor 4 inline editor.

[Jakub Ś]

DUP of #9814.

@sergkr I have moved your links to that ticket.