How To Add Custom Colours To TinyMCE 4 in WordPress 3.9+

TinyMCE 4 in WordPress 3.9 break old customization for adding custom colours, so here we have a tip about how to convert old code to new format supported in TinyMCE 4

WordPress 3.9 brings up latest TinyMCE 4 rich text editor as grat speed improvement, but this update break a lot of TinyMCE plugins (advanced image, advanced link, etc), including various handy customizations for TinyMCE editor in WP-way.

One of them are custom colour swatches. Until 3.9 we simply put following code to functions.php and got our own colours in editor:

Convert TinyMCE option for custom colour swatches to version 4

This solution will not work in WP 3.9, so we need to replace it with working solution below (to be clear, format of colours array is changed, along to TinyMCE option name):

As you can see, option is changed from theme_advanced_text_colors to textcolor_map, and simple array of HEX codes separated by commas, now is changed to JavaScript array that threat elements as pairs of HEX colour value and colour nice name. All is wrapped to brackets.

Change number of colour swatches

Please note, my default TinyMCE 4 have limit up to 40 colour swatches (80 array elements) distributed in 5×8 grid (ROWSxCOLS). So, to append custom colours after default colours, we need to increase number of rows displayed on swatches popup.

To achieve this, we use textcolor_rows parameter.

We even can change grid layout and alter default 5×8 with, for example, 4×10 by setting parameters below:

Please note, this is just example. You can play with layout and colour set as you wish.

How To Add ‘More Colors’ Functionality?

TinyMCE 4 drop support for ‘More Colors’ option, but now there is WordPress plugin TinyMCE Color Picker that brings back this functionality to WordPress 3.9+

Did this tips helped you?

If you found this tips useful, feel free to 

A question posed to StakOverflow encouraged me to explain how this problem can be resolved quickly and easily.