[IE8] CKEDITOR.dom.element#setHtml() will strips new lines

[Marek Lewandowski]

Seems that setHtml strips new lines for IE8.

Here's js code to reproduce the issue:

test_setHtmlNewLines: function() {
	var elem = new CKEDITOR.dom.element( 'pre' ),
		expectedCode = "foo\n\nbar";
	elem.setHtml( expectedCode );
	assert.areSame( expectedCode, elem.getHtml() );
},

It does not work only for pre element, i've tested it with div, p as well.

Pushed TC to tests in t/11719.

[Jakub Ś]

Here are my results:

Native:

<div id="testdivie" style="margin: 20px; border:1px solid black; width:500px;" contenteditable="true">
<h2>IE8 doesn't respect '\n' line breaks in contenteditables when innerHTML is used</h2>
<script>
window.setTimeout(
function(){
var elem = document.createElement('pre');
//elem.innerHTML = 'foo\n\nbar'; //doesn't work
//elem.innerText = 'foo\n\nbar'; //works
elem.innerHTML = 'foo<br /><br /> bar'; //works
document.getElementById('testdivie').appendChild(elem);
},500);
</script>
</div>

Editor:

editor.on('instanceReady', function(){
	var elem = new CKEDITOR.dom.element( 'pre' );
	//elem.setHtml( "foo\n\nbar" ); //doesn't work
	//elem.setText( "foo\n\nbar" ); //works
	elem.setHtml( "foo<br /><br />bar" );//works
	editor.editable().append(elem); 
});

I may be incorrect but changing method to setText (for me \n is text not HTML) or using BR's instead of \n will do the trick.

[Marek Lewandowski]

You're correct that it is IE8 internal issue. I've checked also elem.innerText = 'foo\n\nbar'; and it does not work either. That might be tricky, anyway it makes this ticket invalid.

[Jakub Ś]

elem.innerText = 'foo\n\nbar'; and it does not work either.

Did you mean that comparation doesn't work only? I'm asking because using this method there were visible line breaks in editor.

[Piotrek Koszuliński]

@Marek: this is also an answer why did you have problems in the code snippet plugin. I knew that there was some difference in new lines in <pre> in modern browsers and IE8.

[Marek Lewandowski]

So, to sum things up, i did test one again and it turns out that:

setting pre.innerText = "foo\nbar" will result with following innerHTML:

<pre>foo<br>bar</pre>

setting pre.innerHTML = "foo\nbar" will result with following innerHTML:

<pre>foo bar</pre>

(note it's a space, char code 32 dec, 0x20 hex)

With these tests i've used native dom properties. All other IEs works as expected in that regard.