IE: insertHtml still has problems with contenteditable

[Dinu]

Probably related to #6005
Don't know how to produce a code to reproduce

Visual explanation:

[<span contenteditable="false">foo</span>]
insertHtml('<span contenteditable="false">bar</span>');

The content is added after the selected element instead of replacing it. insertElement works dandy though. I think the selection needs to be deleted altogether.

[Garry Yao]

It's important that such a sample range comes from a real IE selection but not just pure assumption, could you find a real TC for this?

[Dinu]

I got to this by the following procedure:

• set editor contents to <span contenteditable="false">foo</span>
  
• ...(get span element)...
  
• editor.selection.selectElement(spanElement)
  
• editor.insertHtml('<span contenteditable="false">bar</span>')
  

This results in <span contenteditable="false">foo</span><span contenteditable="false">bar</span> in the editor. I didn't find a way to make IE produce a [<span>...</span>] by user interaction, seems to me it's always <span>[...</span>] but I have limited experience with this.

[Dinu]

I use this programatically as widget-editing (widget means special format <span>...</span>); so on toolbar button click, identify <span> and selectElement for replacing with edited contents, which in my understanding should replace the whole-and-nothing-but-concerned-element with the updated element. Lest there's another way to do it?

[Piotrek Koszuliński]

TC:

var editor = CKEDITOR.instances.editor1;
editor.filter.disable();
editor.setData('a<span contenteditable=false id=xxx>TEXT</span>a');
// wait...
ar el = editor.document.getById('xxx');
editor.getSelection().selectElement(el);

// and:
editor.insertElement(CKEDITOR.dom.element.createFromHtml('<b>xxx</b>'));
// or:
editor.insertHtml('xxx');

On IE8 - insertion is blocked - nothing happens. On Chrome - insertion overwrites span element.

It's hard to say what's the expected result, but it should be consistent - selection that contains only non editable element (or is anchored inside one) should be handled block insertion or insertion should overwrite that element.

[Jakub Ś]

This might be happening due to selection not being released. If you add timeout like below you will get consistent results in both Chrome and IE.

editor.on('instanceReady', function(evt){
	editor.filter.disable();
	editor.setData('a<span contenteditable=false id=xxx>TEXT</span>a');
	
	var el = editor.document.getById('xxx');
	//window.setTimeout(function(){editor.getSelection().selectElement(el);editor.insertElement(CKEDITOR.dom.element.createFromHtml('<b>xxx</b>'));},100);
	// or:
	//window.setTimeout(function(){editor.getSelection().selectElement(el);editor.insertHtml('<b>xxx</b>');},100);
});

Taking the above into account this issue may be a duplicate of #10079