id	summary	reporter	owner	description	type	status	priority	milestone	component	version	resolution	keywords	cc
12913	Rich text editor becomes uneditable on resize	djemiolo		"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.
"	Bug	closed	Normal		Core : Editable		duplicate