Opened 10 years ago
Closed 10 years ago
#12913 closed Bug (duplicate)
Rich text editor becomes uneditable on resize
| Reported by: | djemiolo | Owned by: | |
|---|---|---|---|
| Priority: | Normal | Milestone: | |
| Component: | Core : Editable | Version: | |
| Keywords: | Cc: |
Description
This issue has only been seen on v4.x.
If a window or panel is resized, the rich text area has styling applied that causes it to be uneditable.
When the rich text area is editable, the iframe of CKEditor has “width: 100%” style as follows.
--- <iframe src="" frameborder="0" class="cke_wysiwyg_frame cke_reset" title="Rich Text Editor, emailPublisherRte_500xx000000ZR2T" aria-describedby="cke_38" tabindex="0" allowtransparency="true" style="width: 100%; height: 100%;"> ---
But, when the rich text area is uneditable, it has “width: 0px” style as follows.
--- <iframe src="" frameborder="0" class="cke_wysiwyg_frame cke_reset" title="Rich Text Editor, emailPublisherRte_500xx000000ZR2T" aria-describedby="cke_38" tabindex="0" allowtransparency="true" style="width: 0px; height: 100%;"> ---
At that time, the rich text area can become editable when changing width style as 100% from Chrome developer tool. So, this issue is caused by the above incorrect width style. The width style is changed from the following callstack.
--- CKEDITOR.tools.extend.setStyle (element.js:1297) elementProto (plugin.js?t=4.4.4.5:277) CKEDITOR.dom.element.setSize (element.js:2021) CKEDITOR.plugins.add.init.editor.addMode.onResize (plugin.js?t=4.4.4.5:88) listenerFirer (event.js:144) CKEDITOR.event.fire (event.js:289) CKEDITOR.dom.domObject.getNativeListener (domobject.js:46) ---
The event seems to be the window resize event:
- CKEDITOR.plugins.add.init.editor.addMode.onResize is defined as follows.
/sfdc/htdocs/ckeditor/ckeditor-4.x/src/plugins/wysiwygarea/plugin.js --- ( function() {
CKEDITOR.plugins.add( 'wysiwygarea', {
init: function( editor ) {
if ( editor.config.fullPage ) {
editor.addFeature( {
allowedContent: 'html head title; style [media,type]; body (*)[id]; meta link [*]', requiredContent: 'body'
} );
}
editor.addMode( 'wysiwyg', function( callback ) {
...
if ( CKEDITOR.env.webkit ) {
Webkit: iframe size doesn't auto fit well. (#7360) var onResize = function() {
Hide the iframe to get real size of the holder. (#8941) contentSpace.setStyle( 'width', '100%' );
iframe.hide(); iframe.setSize( 'width', contentSpace.getSize( 'width' ) ); contentSpace.removeStyle( 'width' ); iframe.show();
};
iframe.setCustomData( 'onResize', onResize );
CKEDITOR.document.getWindow().on( 'resize', onResize );
}
... ---
In this case, contentSpace.getSize( 'width' ) seems to return 0.
- CKEDITOR.plugins.add.init.editor.addMode.onResize is used only on Webkit based browser (includes Chrome). So, this issue occurs only on Webkit based browsers.
#################################################### SOLUTION/WORKAROUND
Workaround: reload the page to reset editable area/CSS.
This issue can be avoided by not setting width of iframe if contentSpace.getSize( 'width' ) returns 0.
Change History (4)
comment:1 Changed 10 years ago by
comment:2 Changed 10 years ago by
| Status: | new → pending |
|---|---|
| Version: | 4.4.7 |
The bug occurs when a resize event occurs and the CKEditor is not visible.
Could your team provide reduced HTML file that shows this problem in code? I'm talking about very simple HTML page reduced to the problem only that can be out into default editor samples folder and will show this issue.
comment:3 Changed 10 years ago by
Sorry for the delay, here's the HTML reproducer.
- Place the html file in the same folder as ckeditor.js
- Open the html file in Google Chrome
- Note: There is text in the CKEditor and it is editable
- Click the "Hide CKEditor" button
- Resize your browser window
- Click the "Show CKEditor" button
- Note: The text is missing from the editor, the editor is not editable (the reason is the CKEditor's iframe has width = 0)
- Resize your browser window again
- Note: The text is now visible/editable on the editor again
<html>
<head>
<title>CKEditor Width = 0 Bug</title>
<script src="ckeditor.js"></script>
</head>
<body>
<h1>
CKEditor Width = 0 Bug
</h1>
<div>
<ol>
<li> Place the html file in the same folder as ckeditor.js
<li> Open the html file in Google Chrome
<li> <b>Note:</b> There is text in the CKEditor and it is editable
<li> Click the "Hide CKEditor" button
<li> Resize your browser window
<li> Click the "Show CKEditor" button
<li> <b>Note:</b> The text is missing from the editor, the editor is not editable (the reason is the CKEditor's iframe has width = 0)
<li> Resize your browser window again
<li> <b>Note:</b> The text is now visible/editable on the editor again
</ol>
<p>
<input type="button" id="hide" value="Hide CKEditor" onclick="document.getElementById('container').style.display='none';">
<input type="button" id="show" value="Show CKEditor" onclick="document.getElementById('container').style.display='block';">
</p>
</div>
<div id='container'>
<textarea cols="80" id="editor1" name="editor1" rows="10">
<b>Some default text in the editor.</b>
<i>This text will be visible when you first load the editor.</i>
But this text will not be visible after running through the steps listed above the editor.
</textarea>
</div>
<script>
CKEDITOR.replace( 'editor1' );
</script>
</body>
</html>
comment:4 Changed 10 years ago by
| Resolution: | → duplicate |
|---|---|
| Status: | pending → closed |
Thank you for the input. Now everything is clear.
This is however a duplicate of #11616. I have moved your description and comment there.
Thanks again for clear explanation.
More info from our internal dev team:
The bug occurs when a resize event occurs and the CKEditor is not visible. When the CKEditor is made visible again, it has width = 0 and is not editable.