Add option to use classes instead of style attribute

I would love to have this option. I can't use this plugin because I don't want to allow my content editor to paste any style into the editor.

We have this same issue. We can work around it somewhat by creating classes on SPAN in the Style plugin, but it's awkward and people have to use trial and error to pick the right color. I don't know how you could do it dynamically though. We get flagged by security if we have STYLE elements in the page HTML.

Also having this problem as I'm using the "CKEditor Media Resize" module, which requires that the "Limit allowed HTML tags and correct incorrect HTML" filter is turned on.

Hi all,

Created MR5 with the implementation of CKEditor filter plugin for rewriting styles color to color classes. Unfortunately, it should work only with basic_html. Need to find a way how to improve this...

Another point Convert color styles to class plugin should be upper than Limit allowed HTML tags and correct faulty HTML on text format settings page admin/config/content/formats/manage/basic_html (need to add this readme I guess)

Hi @artemboiko,

Your fix is not working in my case.

1. when generating custom colors from the plugin administration, the plugin conditional does not work because it is only validating hsl and the custom colors are added with #.
2. With hsl colors, the plugin's conditional works, and the classes are changed. But when I return to the WYSIWYGs edition, the class disappears and only text remains.

Can you validate if I am correct?

Thanks!

Did you enable Convert color styles to class filter in text format filters list? I guess this should add ability to save rich text to db with hsl styles, and then on edit page in ckeditor you will see colors

Yes, I have activated the filter, but when adding custom colors the filter does not perform any functionality, because the conditional is fixed with hsl. You can do the test, add some custom color in the plugin configuration, activate the "Convert color styles to class" filter and save. Go to some content, add a color and save.

You will see that the filter is not working correctly.

@yovanny.gomez.oyola

Is your filter on the top of Filter processing order ?

Hi! I can confirm that its not working when I enable ""Limit allowed HTML tags and correct incorrect HTML".

Steps to reproduce:

1. Installing by composer.
2. Add patches:
"no config schema' Error after update to Drupal 10.1.0": " https://www.drupal.org/files/issues/2024-01-25/ckeditor5_font-schema-fix... → ",
"TypeError: array_filter(): Argument #1 ($array) must be of type array": " https://www.drupal.org/files/issues/2023-04-21/3350333-5.patch → ",
"Add option to use classes instead of style attributes": "https://git.drupalcode.org/project/ckeditor5_font/-/merge_requests/5.diff"

3. Enable the module.
4. Configure color; I think, that is required to configure color because if not, the code doesn't execute when we need it, only when comparing with the custom configured colors.

5. Select the new filter and put it higher the "Limit allowed HTML tags and correct incorrect HTML" filter.
6. The filter removes the style and cannot change style per class, because style is not existing anymore.

Thank you!

I pushed new version that allows span tag with "class" attribute and, also now works with configured colors, not just HSL default colors.

The hardcoded format_id 'basic_html' remains unsolved, we need to find a solution.

Also I suggest to create a css located (for example) at sites/default/files/ckeditor5_font/format_id /colors.css dynamically based on configuration format editors. At the moment, we need to create our 'css' file and style our class 'ckeditor5-font-color-$label'. The $label is the label configured on ckeditor5_font colors available

It works if combine this patches:

"no config schema' Error after update to Drupal 10.1.0": " https://www.drupal.org/files/issues/2024-01-25/ckeditor5_font-schema-fix → ...",
"TypeError: array_filter(): Argument #1 ($array) must be of type array": " https://www.drupal.org/files/issues/2023-04-21/3350333-5.patch → ",
"Add option to use classes instead of style attributes": "https://git.drupalcode.org/project/ckeditor5_font/-/merge_requests/5.diff"

Hope it helps.

@tobas1996 thanx,

Good catch, my miss to add "span class".
I agree regarding hardcoded basic_html need to find a way for getting this right dynamically.

I am not sure about generating css because this is fornt part and could be different theme on front, need to think about this too.

Ok,

Now its working without hardcoding the format. I overrided the function preRenderText, in order to pass the $format_id to our process() function inside the filter.

Its working fine, BUT when we go to edit page again, the "Limit allowed HTML tags and correct faulty HTML" removes the style/class attributes, so we lose the color.

It means, that works only when you add color, and save. When you come back to the edit, you don't have the style/class attribute, so we are losing that content :( .

I don't know why its happening, I think its because the filter it's only acting on render, and we need to do it on 'save' maybe. This is not problem that comes with my code, it was already happened.

I think that we can't improve our solution for now, so... for now its working "fine", but only the first time. Then you can set again the text you want, and save it, and will be saved and working. It means that is working perfect if you disable "Limit allowed HTML tags and correct faulty HTML" and the style attribute are converted into class.

On another hand
I saw this on ckeditor5 documentation: https://ckeditor.com/docs/ckeditor5/latest/features/font.html

FontColor – Control the font color by applying inline elements with a color in the style attribute. , so the problem would come from ckeditor. Look this active issues on ckeditor5 --> https://github.com/ckeditor/ckeditor5/issues/6557 -- https://github.com/ckeditor/ckeditor5/issues/15794

They suggest to use https://ckeditor.com/docs/ckeditor5/latest/features/highlight.html

Maybe should go for use that instead of fontColor plugin.

Waiting some answer on this appreciations.

Thanks in advance