HTML elements with <font> tag cannot be loaded into CKEditor

[LangQian]

📝 Provide detailed reproduction steps (if any)

1. Go to https://ckeditor.com/docs/ckeditor5/latest/examples/builds/classic-editor.html
2. In console paste
   editor.setData('<font color="#ff9900">bbb</font>');
3. Check the HTML parsed by CK Editor

✔️ Expected result

The element was kept the same.
OR
The tag was converted to something else, but the color information was kept.

❌ Actual result

Was converted to <p>bbb</p>. And the color was lost.

---

If you'd like to see this fixed sooner, add a 👍 reaction to this post.

[LangQian]

Please note that our product was already released with CK Editor version 22.0.0, so this is an issue our customers are facing and we are trying to fix it urgently. If any fix or temporary workaround can be provided, we would really appreciate it. Thanks!

[mlewand]

Font color doesn't have the conversion for html4-style font color makrup (which is removed in html5). You can get around that with a simple converter:

editor.conversion.for( 'upcast' ).elementToAttribute( {
	view: {
		name: 'font',
		attributes: {
			'color': /.+/
		}
	},
	model: {
		key: 'fontColor',
		value: viewElement => viewElement.getAttribute( 'color' )
	}
} );

You can see how it works here: https://codepen.io/mlewand/pen/PoGWLor?editors=1010

[LangQian]

Hi @mlewand , thanks for your response and workaround. I later found that the issue also exists for 'face', 'size' and 'styles' attributes. How can I extend the above solution to apply on all of them? This is a sample input: <font color="#ff9900" face="arial black" style="font-style:italic;font-weight:bold" size="3">sample</font>.