Color button does not highlight active color when colorButton_foreStyle with class used

[f1ames]

Type of report

Bug

Provide detailed reproduction steps (if any)

See this codepen for easy reproduction.

1. Config editor with colorButton_foreStyle to use class instead of styles:

colorButton_foreStyle: {
      element: 'span',
      attributes: { 'class': '#(color)' },
      overrides: [{
        element: 'span',
        attributes: {
          'class': /.text/
        }
      }]
},

2. Apply color via color panel.
3. Open panel to see if previously applied color is highlighted in a panel.

Expected result

Previously applied color is highlighted in a panel.

Actual result

Automatic applied color is highlighted in a panel.

Other details

Works with 4.11.4 (see codepen), broken in 4.12.0 (due to changes in #1478 - see codepen). Since we are introducing colorName back (see #3940), it should be also covered there to work as before.

It's quite complicated because 4.12.0 changed the behavior of color in colorButton_foreStyle configuration so you are not able to use it reasonably with attributes: { 'class': '#(color)' } (as it always contains # and will produce invalid class names). We may assume this was intentional due to those changes in #1478 but I will treat it as a bug (and regression), since it looks more like a side effect which we didn't full predicted.

• Browser: All (tested on Chrome)
• OS: All (tested on Linux)
• CKEditor version: 4.12+
• Installed CKEditor plugins: colorbutton

[chrisi51]

i guess i have the same issue in an typo3 v10 installation right now.
i can mark text and set the color (or background color). The code is changed accordingly to my settings but the css class is not "displayed" in the editor.

For Example if i have a class .red {color:red} in my CSS file and a yaml config

    extraAllowedContent: "p(*);span(*)" 
    colorButton_colors: "red/FF0000"
    colorButton_foreStyle:
        element: 'span'
        attributes: { 'class': '#(colorName)' }

Then i get in my code sdfdsgdflgdf but it is not shown as red and also the colorbutton is not indicating a red setting. But the information is successfully stored but just not visible in the editor - except of you check the generated source.

Are there any news to this problem or any workarround? I could use style="color:#FF0000" instead and this is actually working but i would like to activate CSP rules which sets inline styles as forbidden.

[chrisi51]

oh wow ... just realized, contentsCss: "/.../style.css" seems to be seen as a static file and so its cached. any changes did not got recognized. i just changed it to contentsCss: "/../style.css?v=1" and the styles are applied so that i can see them on the editor.

but nevertheless the editor itself does recognize those set color changes and even shows you which color was set, but you cant remove or change them with the editors ui. only way is to switch to source code vision and change it there.

if your try to change the color it just adds another wrapping span outside so that it have no effect as the previous setting is still the primary. changing to automatic/default color has no effect to code or vision.

[flinguin]

@chrisi51 have you found a solution for the problem?

it seems that 'attributes' is completely ignored and so applying "named Colors" via css classes is broken
applying colors directly via 'styles' property does work for me ... but it is not what i'd like to achieve.

i am not sure if this is a typo3-specific issue (like the YAML config does not allow for 'attributes') or if this a problem in CKeditor in general.

[flinguin]

@chrisi51 fyi ... just found the solution
check your CKeditor version that comes with your Typo3 v10 - untill 4.15 the #colorName is not supported for output in attributes

[chrisi51]

@f1ames time passed by and the problem got shifted and then forgotten xD will have to check this later ... thx for your comments