suggestion: make hidden element actually hide in IE too, x-browser behavior

[Paul Moers]

I think it's a good idea to make the behavior of hidden element the same in all browsers. This actually is doable in IE so I have found after lots of searching:

Setting

FCK.EditorDocument.execCommand('RespectVisibilityInDesign', true, null);

makes display:none and visibility:hidden to be respected in editable documents (contentEditable=true).

(Setting the second parameter to false instead of true will disrespect visibility, the default behavior of IE; and setting it to null will toggle the option.)

See ​http://msdn.microsoft.com/en-us/library/aa770023(VS.85).aspx (IDM_RESPECTVISIBILITY_INDESIGN)

[Garry Yao]

Thanks for the great hack! I think it's originally designed for plug-in developers, it works for hidden style but not hidden field though.

[Alfonso Martínez de Lizarrondo]

But in this post ​http://www.fckeditor.net/forums/viewtopic.php?f=6&t=12826#p33540 you state that it causes lots of flicker, so if that's true then I don't think that it's a good idea to enable that command, as most of the people won't use hidden elements and they will note the bad behavior.

Or was that problem caused by something else?

[Paul Moers]

It was caused by toggling the display of a 'mouseover control element' in the editingArea onmouseover of an object (a plugin I'm developing), so this should be no problem.

[Alfonso Martínez de Lizarrondo]

As long as it doesn't break anything it can be good to support it to avoid showing data in design mode that isn't available in the final page or other browsers.

[Alfonso Martínez de Lizarrondo]

#5652 has been marked as dup

[Garry Yao]

Now that we could achieve this with the ​protectedSource config with no side effects.

[Marcos Wright Kuhns]

Could someone explain how to use protectedSource to force IE to RespectVisibilityInDesign? Using ​http://ckeditor.com/demo, you can still see this bug in IE by pasting the following into source mode, then switching back to WYSIWYG.

<p>
  hello
  <span style="display: none;">hidden</span>
  <span style="visibility: hidden;">world</span>
</p>

I would expect only "hello" to be shown, yet in IE8, as of CKEditor 3.4.1 "hello world" is displayed.

If I open up the Developer Tools in IE8 and run the following JavaScript, things display as they should unless you toggle into & out of Source mode:

CKEDITOR.instances['editor1'].document.$.execCommand('RespectVisibilityInDesign', true, true);

[Jakub Ś]

#8535 has been marked as dup.

[Jakub Ś]

The bug seems to occur only in IE7 and IE6.

I have attached modified replacebycode sample which tries to workaround the problem. This is the best I could came up with:

function doSth(editor){										
editor.document.$.execCommand('RespectVisibilityInDesign', true, true);
var imgArray = window.document.getElementsByTagName('iframe')[0].contentWindow.document.images;					
	for (var i = 0; i < imgArray.length; i++) {
		var obj = editor.document.getById(imgArray[i].id); 
		obj.hide();
	}					
}
				
var editor = CKEDITOR.replace( 'editor1' ,{});
				
editor.on('mode', function(evt){
	if(evt.editor.document)
		evt.editor.document.$.execCommand('RespectVisibilityInDesign', true, true);
});

The code fired on mode change helps to hide images when switching from source to wysiwyg but the problem is that they are visible for a second which is not very nice.

As discussed with @fredck the only way to fix it is having RespectVisibilityInDesign included in the source code.

[Jakub Ś]

Little update:

Looking up the code

<p>
  hello
  <span style="display: none;">hidden</span>
  <span style="visibility: hidden;">world</span>
</p>

Results are as follows:
IE8 and IE9 don't respect visibility:hidden
IE6 and IE7 don't respect neither visibility:hidden nor display:none