Opened 8 years ago

Closed 6 years ago

#6742 closed Bug (expired)

IE: insertHtml still has problems with contenteditable

Reported by: Dinu Owned by:
Priority: Normal Milestone:
Component: General Version: 3.4
Keywords: Cc:

Description

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.

Change History (7)

comment:1 Changed 8 years ago by Garry Yao

Status: newpending

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?

comment:2 Changed 8 years ago by 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.

comment:3 Changed 8 years ago by 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?

comment:4 Changed 8 years ago by Krzysztof Studnik

Version: 3.4.3 (SVN - trunk)3.4

comment:5 Changed 6 years ago by Piotrek Koszuliński

Status: pendingconfirmed

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.

comment:6 Changed 6 years ago by Jakub Ś

Status: confirmedpending

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

comment:7 Changed 6 years ago by Jakub Ś

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