Search code examples
tinymcetinymce-plugins

TinyMCE only showing 2 Colors in the ColorPicker instead of 3

TinyMCE backcolor module displays only 2 colors out of 3 in color_map

I'm integrating the backcolor module from TinyMCE in my project and using the color_map configuration to provide a quick selection of specific colors that are important for our application. However, I'm encountering an issue where only 2 colors are displayed in the dropdown instead of the intended 3.

Here's a visual representation of the issue: Screenshot of TinyMCE showing 2 colors enter image description here

Below are the relevant parts of my configuration:

TS-File:

modules = {
    base_url: '/tinymce',
    suffix: '.min',
    content_css: environment.cssUrl,
    content_style: 'body { padding: 20px; }',
    language: this.translateService.currentLang,
    branding: false,
    menubar: false,
    link_context_toolbar: false,
    resize: false,
    statusbar: false,
    skin: 'oxide',
    plugins: 'autolink lists link image table',
    toolbar:
      'drpdwnHeading bold bullist numlist indent outdent table link image backcolor | style_formats',
    color_map: [
      '#FDECD9',
      '#FFDCDC',
      '#E8E4E4'
    ],
    setup: this.editorCustomSetup,
};

HTML:

<editor [init]="modules"></editor>

How can I ensure all 3 colors are displayed in the backcolor dropdown? Any guidance would be appreciated.

Solution

  • The color_map config is slightly odd in that although it is specified as an array, it's actually expecting a map of color/name pairs rather than just the color values.

    So, you should be specifying an array of six values, with a name for each colour (perhaps one with a semantic meaning for your application), e.g.

    ...
    color_map: [
      '#FDECD9', 'Heading',
      '#FFDCDC', 'Sub-heading',
      '#E8E4E4', 'Footnote'
    ],
...

    Your current config is failing because it's taking #FFDCDC as the name for the first color #FDECD9, and undefined as the name for your third color #E8E4E4, so you'll only see the first and third colors in the menu.