<font> tag inserted when css style should be used when overwriting multiple paragraphs

[kleesman]

Steps to reproduce

1. Open full demo: ​http://ckeditor.com/demo#full
2. Highlight top 2 paragraphs (Apollo 11 through UTC.) and select a font from the font dropdown. As expected span is given font-family css style.
3. With same content highlighted, type the word test, which will overwrite the existing content.

Expected result

Expected to see a span with font-family css style.

Actual result

<font face="times new roman, times, serif">test</font>

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

In my application testing I have used:

allowedContent: 'br[*];p{text-align,margin-top};span{color,font-family,font-size,letter-spacing,font-style,font-weight,text-decoration}'

and editor.config.disallowedContent = 'font';

to try to prevent this font tag. Even with these items, the font tag still gets entered. However, if I activate the editor again, the <font> tag is removed without the font face being converted to a <span>

[Jakub Ś]

DUP of #13775.

There is a workaround added there. Please note that span tag will still be changed to font tag in wysiwyg view but when you get editor contents with getData() method which is a standard way of getting data out of editor, it will be changed back to span.

[kleesman]

Replying to j.swiderski:

Is there a way to trigger the ACF transformation in the other task to run immediately, like on keyup? We're using the inline editor so I never call getData(), but rather rely on the actual HTML content being altered. With the ACF transformation in place, the <font> tag remains and is only replaced if I click off the editor and then come back to it activating it again.

[kleesman]

Actually, was able to use that to do something that worked (almost) perfectly. In the keydown event I check to see if the <font> tag is present in the html. If it is, I run:

CKEDITOR.currentInstance.setData(CKEDITOR.currentInstance.getData());

which updates the editor's html with the transformed version from getData. The only issue here is that the cursor is positioned back at the beginning of the line, which puts it in front of the letter you just typed. I can live with that in this particular scenario to be sure the <font> tag is eliminated right away.

[Jakub Ś]

We're using the inline editor so I never call getData(), but rather rely on the actual HTML content being altered.

But you should always use {getData() even when you are using AJAX. This method is used to clean all extra attributes or fake elements which CKEditor uses to manage parts of content.

Just open e.g. Firebug and inspect an anchor, image or a widget. All these elements contains e.g. extra attributes which getData() cleans.

Instead of calling CKEDITOR.currentInstance.setData(CKEDITOR.currentInstance.getData()); on keyup event (please tell me it's not every keyup) which is costly you can get correct data when you want to submit it.

---

I'm not sure how are you getting page contents but if this is something like document.getElementById('editable').innerHTML then this doesn't clean CKEditor custom attributes. You will see a lot of data-cke-saved-href and similar.