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.

[shabssd]

This bug is not native to IE. I'm experiencing it in the latest version of Google Chrome.

[Jakub Ś]

@elkrocke I have tested latest Chrome 55.0.2883.87 and CKFinder 4.6.0 but no issue has occurred for me. Could you tell me what are the exact steps to get font tags in Chrome? Could your perhaps provide a screen cast showing how to reproduce in demo page?

[kkrzton]

You may find my comment in ​#14302#comment:3 helpful. Following the scenario described there I am only able to reproduce the bug on Edge/IE. Also I tried with plain contenteditable but it behaves correctly so it does not seem like the native IE issue.

---

The scenario from comment mentioned earlier:

1. Go to ​http://sdk.ckeditor.com/samples/acf.html to Disabling ACF sample.
2. In the source mode paste HTML

<p><span style="font-size:18px;color:#00FF00;background-color: #FFFF00">Text</span></p>

3. Switch back to WYSIWYG mode.
4. Select whole Text.
5. Type something.

Resulted html is:

<p><font color="#00ff00" style="background-color: rgb(255, 255, 0);">Typed text</font></p>

It also seems that ACF does not have any effect on this issue, e.g. config.allowedContent = 'span[*](*){*}'; does not help.

[kkrzton]

This issue is caused by the part of the fixDom method - ​https://github.com/ckeditor/ckeditor-dev/blob/master/core/editable.js#L1361.

[kkrzton]

As a previous comment stated, what triggers the issue is bogus br inserted in the fixDom method, however it is not the direct cause of the issue.

[kkrzton]

So the cause of this issue is br element after span element:

<p><span>bar</span><br></p>

and with such HTML it occurs also in plain contenteditable which means is is native IE bug. See ​http://codepen.io/f1ames/pen/YNjORa.