Custom colors added to colorButton_colors in form label/code don't work at all

[jswiderski]

Are you reporting a feature request or a bug?

Bug

Check if the issue is already reported

• https://dev.ckeditor.com/ticket/14838
• https://dev.ckeditor.com/ticket/11679 (only point1 as this ticket is bigger)

Provide detailed reproduction steps (if any)

1. Define custom color for your editor e.g. colorButton_colors : 'highlight_yellow/FFFF00',
2. Open color dialog and hover the yellow color.
3. Next try to apply the color to some text, see the result and switch to source mode.

Expected result

The color tooltip should be highlight_yellow

The color applied should be visible in the editor and when switching to source mode, the code should be highlight_yellow,

Actual result

The color tooltip is FFFF00

The color applied is not visible in the editor and when switching to source mode, the label is applied FFFF00 and not the label.

Other details

As you will read in ticket https://dev.ckeditor.com/ticket/11679, you also can't apply clsses that way.

Colors are applied based on code only https://github.com/ckeditor/ckeditor-dev/blob/master/plugins/colorbutton/plugin.js#L273. Searching name by the color in lang file is good but the *[second option should be] the custom label and the code itself should be treated as last resort.

• In this very example the FFF00 color is already defined in the lang file. Perhaps a better option would be making the label the first choice since user has defined it, the second should be language file search based on code and the last should be the code itself.

I also think that documentation should be improved for this configuration setting.

• Browser: Any
• OS: Any
• CKEditor version: 4.0+
• Installed CKEditor plugins: colorbutton

[f1ames]

There are three places where color is used:

1. To display color (color square) in color button panel.
2. To display tooltip for color square in color button panel.
3. To apply color to a content.

When color is defined like highlight_yellow/FFFF00, the above values will use:

1. #FFFF00
2. Also uses FFFF00, but when color has its readable name in lang entries it will use it - in this case Yellow.
3. highlight_yellow

If you switch the config like #FFFF00/highlight_yellow, it will be:

1. #highlight_yellow
2. highlight_yellow
3. #FFFF00

See (codepen sample).

---

The documentation says:

A color name may optionally be defined by prefixing the entries with a name and the slash character. For example, 'FontColor1/FF9900' will be displayed as the color #FF9900 in the selector, but will be output as 'FontColor1'.

IMHO, it describes the above behaviour (in a little confusing way). There is name/entry, so the entry is used in a color button panel (1. and 2.) and name is used as the output (3.) so applied to content.

So it works according to the specification, but I have to admit this behavior is quite unintuitive.

[Fr33L4nc3r]

Hello,

I just stumbled across this issue while trying to make ckeditor color configuration changes.

I had set custom colors on top of default ones, using only hexadecimal values, and thought "why not add labels so it's easier to distinguish them", and followed the instructions from the documentation and used the highlight_yellow/FFFF00 pattern.

I end up being disapointed that it wouldn't work anymore, and I'm not sure if it's working as specified, or just a bug, but what I'm convinced is that there should be a pattern to support the following output (as explained above), which is the most intuitive / natural / expected when reading the documentation :

1. #FFFF00
2. highlight_yellow
3. #FFFF00

[StijnVh]

It is indeed very counter-intuitive and confusing. I placed them also in the wrong order...

[engineering-this]

Most obvious use case for me is:

User wants to predefine some custom colors with names to distinguish them easier.
In that case after setting colorName/colorHash I'd expect following:

• Square in color panel has color colorHash,
  Actual: the same
• Tooltip says colorName,
  Actua: the same
• Actual text color in editor after applying it is colorHash,
  Actual: colorName
  -> this doesn't make sense, color name is supposed to work as an alias not an actual color which is to be applied on text.

Here is example of how this currently works:
#FF0000/0000FF -> color box is blue, color in editor is red, tooltip says #FF0000.

We should change color applied to match second part of config option and update docs, so there are no more confusions on how to use it.