Typing into selected contents of span tag creates font tag

[Jakub Ś]

Steps to reproduce

1. Open replacebycode sample and clear editor contents
2. Type few characters
3. Select chars and change text color and font to e.g. Comic sans
4. While whole text is still selected (you can also unselect and select whole sample text again - result will be the same), type new random characters

Expected result

Span tags stays and only its content changes.

Actual result

Span tag is changed to font tag.

Other details (browser, OS, CKEditor version, installed plugins)

Problem can be reproduced from CKEditor 4.0 in Blink/Webkit and in IE11 from version 4.3 (this is the version when we have started supporting IE11 and issue probably occurs in earlier versions as well). Firefox and IE10- seem to work fine.

[Jakub Ś]

As a workaround ACF transformations might be used:

var editor = CKEDITOR.replace('textarea_id', {/*instance specific configuration*/});

editor.on('pluginsLoaded', function(evt){
	evt.editor.filter.addTransformations( [
		[
			{
				element: 'font',
				left: function( el ) {
					return el.name == 'font' && ( el.attributes.face || el.attributes.color );
				},
				right: function( el, tools ) {
					if( el.attributes.face ) {
						el.styles['font-family'] = el.attributes.face;
						delete el.attributes.face;
					}
								
					if( el.attributes.color ) {
						el.styles['color'] = el.attributes.color;
						delete el.attributes.color;
					}
								
					el.name = 'span';
				}
			}
		]
	]);
});

[Jakub Ś]

#14645 was marked as duplicate.

[Jakub Ś]

This seems to be IE native issue, if you try below code:

<div style="margin:20px; border:1px solid black; width:500px;" contenteditable="true">
	<strong>test</strong>
</div>

select all and press e.g. c character, you will get c wrapped in b tags; The same will happen if you place cursor behind test^, press backspace 4 times and then start typing.