CKeditor stripping allowed style attribute

Question

I've installed Colorbutton to my Drupal 8 site.

I have enabled the button for Full HTML and For Basic HTML

I have allowed the attribute <span style> in the Basic HTML allowed attributes area.

I have defined a set of hex value colors.

When I edit a page the button appears and I can change font colors in the editor correctly, however, saving the page strips the attributes leaving only clean <span> tags...

what else am I suppose to do?

There is a simmilar question here, however in relation to colorbotton the documentation/README that comes with the module specifically states that we should be allowing <span style> in the allowed tags? Is their readme incorrect?

The extension appears to add the color by adding the attribute style="color:#fff"> How can I allow it to do this successfully?

Answer 1

Your problem comes from the "Limit allowed HTML tags" option. According to this post (for Drupal 7, but the same logic applies on D8), setting this option triggers XSS filter in order to remove dangerous tags.

As for Drupal 8, it uses the core Filter module and calls filterXss() method in \Drupal\editor\EditorXssFilter\Standard class. First line of this method is:

$dangerous_tags = ['script', 'style', 'link', 'embed', 'object'];

Hence, your style tag will always be removed with the "Limit allowed HTML tags" option set.

If you really wish to use inline style, you have to either:

• unset the "Limit allowed HTML tags" option (which I do not recommend depending on the kind of users you give access to "Basic HTML" text format)
• or use "Full HTML" text format

Best solution would be to rely on classes and styling in CSS stylesheets and inline styling should be used sparingly.

Hope this helps.

Answer 2

In case it is of use to someone, it seems colorbutton cannot work if the "limit html tags" filter is active.

You can find a slightly painful workaround here.

It would be nice to have an explicit warning in the documentation, but it seems only Full HTML or the above workaround will let you use it.

Answer 3

CKEditor 5 (coming to Drupal 10) supports font color and background color natively. There is a CKEditor 5 issue about adding support for using classes instead of style, which, if implemented, will allow us to define the classes and allow use of font coloring with Basic HTML.