Colours pallet to WordPress visual editor
This code snippet adds a colour picker for text or background colour found inside the visual editor toolbar with a customisable colour grid.
The Code
Just add the following block of code to your theme’s functions.php file, and customise to suit your requirements:
Explaining the Code
Before the TinyMCE toolbar is initialised, it calls the tiny_mce_before_init hook.
We create a function called wptb_tinymce_options that will run when this hook is called, by registering it with the tinymce_before_init hook:
function ( $init ) {
//Do stuff;
}
//We register our function to run when the tiny_mce_before_init hook fires:
add_filter( 'tiny_mce_before_init', 'ns_mce4_options' );
Our function receives an array of TinyMCE $init. Since we receive this array before the TinyMCE component initialises, we can modify it before everything is rendered to the screen.
One of the items in this array is $init[ ‘textcolor_map’ ], which contains a specially-formatted string of colours and colour names. By replacing this string with our own, we can override the built-in colour palette.
$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.' ]';
Lastly, the hook expects us to return the updated $init array so that the TinyMCE Editor can complete initialisation:
return $init;
ABOUT AUTHOR
