How do you add custom color swatches to all WYSIWYG editors?

by

I would like to be able add the same custom colours to the swatches at bottom of colour picker panels that appear in the WYSIWYG editors across the site, to make it easier for clients to keep consistent in their styling.

The swatches I refer to are the bottom row in the screenshot.

I would like to do this without installing a plug-in, ideally.

Colour chooser

2 s
2

Click on the Custom... text and the color picker will pop up. Pick the color of your choice and press OK. Chosen color will appear as a custom swatch for later use.

Note! The solution above is not a solution. See comments and edit below.

Edit:

Here is a function which replaces the entire default palette with custom swatches.

Note, there are 7 colors in the list instead 8. That’s because there should be also the multiplication X (✕) at the end of the color list which removes any color applied to the text. So, when adding one more row there should be 15 colors, not 16.

function my_mce4_options($init) {

    $custom_colours="
        "3366FF", "Color 1 name",
        "CCFFCC", "Color 2 name",
        "FFFF00", "Color 3 name",
        "99CC00", "Color 4 name",
        "FF0000", "Color 5 name",
        "FF99CC", "Color 6 name",
        "CCFFFF", "Color 7 name"
    ";

    // build colour grid default+custom colors
    $init['textcolor_map'] = '['.$custom_colours.']';

    // change the number of rows in the grid if the number of colors changes
    // 8 swatches per row
    $init['textcolor_rows'] = 1;

    return $init;
}
add_filter('tiny_mce_before_init', 'my_mce4_options');

Also, you can build you own swatch grid depending on the color number and UI requrements:

$init['textcolor_rows'] = 4;
$init['textcolor_cols'] = 2;

Largely based on this WPSE answer.

For more information and customization see this blog post.

Leave a Comment