Opened 5 years ago

Closed 5 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 5 years ago by djemiolo

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.

comment:2 Changed 5 years ago by Jakub Ś

Status: newpending
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 5 years ago by naboobaker

Sorry for the delay, here's the HTML reproducer.

  1. Place the html file in the same folder as ckeditor.js
  2. Open the html file in Google Chrome
  3. Note: There is text in the CKEditor and it is editable
  4. Click the "Hide CKEditor" button
  5. Resize your browser window
  6. Click the "Show CKEditor" button
  7. Note: The text is missing from the editor, the editor is not editable (the reason is the CKEditor's iframe has width = 0)
  8. Resize your browser window again
  9. 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">
        &lt;b&gt;Some default text in the editor.&lt;/b&gt;
        &lt;i&gt;This text will be visible when you first load the editor.&lt;/i&gt;
        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 5 years ago by Jakub Ś

Resolution: duplicate
Status: pendingclosed

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.

Note: See TracTickets for help on using tickets.
© 2003 – 2019 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy