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). 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';
				}
			}
		]
	]);
});