Opened 4 years ago

Last modified 2 years ago

#13775 confirmed Bug

Typing into selected contents of span tag creates font tag

Reported by: Jakub Ś Owned by:
Priority: Normal Milestone:
Component: General Version: 4.0
Keywords: IE11 Blink Webkit Cc:

Description (last modified by 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.

Change History (11)

comment:1 Changed 4 years ago by Jakub Ś

Status: newconfirmed
Summary: Typing into selected area ccontents of span tag creates font tagTyping into selected contents of span tag creates font tag

comment:2 Changed 4 years ago by Jakub Ś

As a workaround ACF transformations might be used:

			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';
							}
						}
					]
				]);
			});
Version 0, edited 4 years ago by Jakub Ś (next)

comment:3 Changed 3 years ago by Jakub Ś

Description: modified (diff)
Keywords: Blink Webkit added
Version: 4.34.0

comment:4 Changed 3 years ago by Jakub Ś

#14645 was marked as duplicate.

comment:5 Changed 3 years ago by Jakub Ś

Description: modified (diff)

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.

Last edited 3 years ago by Jakub Ś (previous) (diff)

comment:6 Changed 2 years ago by shabssd

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

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

comment:8 Changed 2 years ago by 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>
  1. Switch back to WYSIWYG mode.
  2. Select whole Text.
  3. 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.

comment:9 Changed 2 years ago by kkrzton

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

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

Last edited 2 years ago by kkrzton (previous) (diff)

comment:11 Changed 2 years ago by 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 it is native IE bug. See http://codepen.io/f1ames/pen/YNjORa.

Last edited 2 years ago by kkrzton (previous) (diff)
Note: See TracTickets for help on using tickets.
© 2003 – 2019 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy