How to apply formatting to content of a span

Question

With CkEditor, When I create an A tag and later apply some custom formatting (like color text for instance), the resulting source looks like this:

<p><a href="http://somelink.com"><span style="color:#1abc9c;">some text</span></a></p>

As you can see, the formatting is around the text but INSIDE the A tag.

I have a personal plugin that outputs a SPAN tag with a specific class. In the wysiwyg editor, when I select the text and apply the same formatting, I get this:

<p><span style="color:#1abc9c;"><span class="command3d">Some text</span></span></p>

This time, the formatting is not simply around the text. It is applied around the SPAN tag.

How can I control this behaviour? I would like to get this result instead:

<p><span class="command3d"><span style="color:#1abc9c;">Some text</span></span></p>

Thanks

Comandeer Comandeer · Accepted Answer · 2017-12-03T14:34:10

Unfortunately there is no ability to control the order of inline styles (based on span tags) inside editor's instance. The only sensible way to achieve desired result is to start with applying text color and then apply your custom style.

However there are two methods to convert output of the editor to the correct format. The first is to add custom handler to editor's data processor via toDataFormat event to check ancestors of span.command3d and swap them in places if necessary. However it's a little bit troublesome as you must traverse through all content, therefore it's easier way: add element callback to editor's filter. Example.

How to apply formatting to content of a span

1 Answers