Ckeditor 5 Set Style On Element

we are trying to 'hack' CKEditor 5 font-family a bit. We would like set font-style to parent element (for example

), when you select whole text in element. Resulting synta

Solution 1:

Quick answer

The amount of work needed to implement this in a reliable way (taken all possible scenarios how and to what a font family can be applied) is not worth the cleaner output.

Long answer

First, you need to understand how the editor's model work. That it's an abstract representation of the rich-text content (in which you won't find styles, just generic attributes) which is later converted to a DOM-like view.

So, answering why the font family style wasn't rendered in the DOM despite the fact that you changed some attribute in the model – that's because you haven't provided converters for that attribute. By default, the font plugin provides only a converter for a text attribute (yep, in the model inline styles are represented as text attributes).

Now, let's consider you provided the right converters. What's now?

The user applies a font family to the entire paragraph – so you change this attribute on that paragraph. It gets rendered as <p style=...>.

But then, the user changes the font family on part of the text in that paragraph. If you won't do something, you'll end up with:

<pstyle="font-family:x">foo <spanstyle="font-family:y">bar</span></p>

And soon you may have this:

<pstyle="font-family:x"><spanstyle="font-family:y">bar</span></p>

Not any more a cleaner output, right?

So, what you'd need to do is to watch all the changes in the model and, at some point, remove this attribute from the paragraph. There's actually even a concept of post-fixers which can be used for such a job. But it gets complicated, isn't it?

The other option is to use the fact that conversion (between the model and the view) in CKEditor 5 is something really powerful. You should be able to convert model's text attribute to (conditionally):

• a view element's attribute if this attribute is present on the entire content of this element;
• or using the default converters (which create <span>s on the text).

Where's the code? I'm too lazy to write it. And test it. This improvement is, IMO, not worth the effort.

EDIT: Sorry for the tone of the last sentence, but that's how I feel about tweaking such things. As developers we tend to be pedantic, but from data perspective it doesn't make much difference (in this case).