Search code examples
tinymcetinymce-5

Customizing fore colors in TinyMCE v5

In TinyMCE v4.x we used the textcolor plugin which added a toolbar button for choosing the font color. Using the textcolor_map configuration property we could provide an array of specific colors.

TinyMCE v5 has moved this functionality into the default code. I can't find any documentation on if, and how we can customize the available colors.

This worked in tiny v4 using the textcolor plugin, but doesn't in v5:

textcolor_cols: 2,
textcolor_rows: 1,
textcolor_map: [
    '363E47', 'Black',
    'E74C3C', 'Red'
]
Solution

  • This function still exists in TinyMCE 5:

    https://www.tiny.cloud/docs/configure/content-appearance/#color_map

    For example:

    tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  toolbar: 'forecolor backcolor',
  color_map: [
    'FF0000', 'Red',
    'FFFF00', 'Yellow',
    '008000', 'Green',
    '0000FF', 'Blue'
  ]
});

    Here is a working TinyMCE Fiddle: https://fiddle.tiny.cloud/bAhaab