Add custom text color WordPress 3.9 TinyMCE 4 visual editor
I have a code snippet that helps me add some custom colors to the visual editor text color dropdown as well as the default color. I am going to paste the code snippet below.
function change_mce_options( $init ) {
$default_colours = '000000,993300,333300,003300,003366,000080,333399,333333,800000,FF6600,808000,008000,008080,0000FF,666699,808080,FF0000,FF9900,99CC00,339966,33CCCC,3366FF,800080,999999,FF00FF,FFCC00,FFFF00,00FF00,00FFFF,00CCFF,993366,C0C0C0,FF99CC,FFCC99,FFFF99,CCFFCC,CCFFFF,99CCFF,CC99FF,FFFFFF';
$custom_colours = 'e14d43,d83131,ed1c24,f99b1c,50b848,00a859,00aae7,282828';
$init['theme_advanced_text_colors'] = $default_colours . ',' . $custom_colours;
$init['theme_advanced_more_colors'] = true;
return $init;
}
add_filter('tiny_mce_before_init', 'change_mce_options');
After wordpress 3.9 update, it stopped working, I have tried a lot to fix it, but I can't, can you please help me?
The options for text color are textcolor_map, and the format for each color is "color_hex", "color_name".
So from your example, just change the option name and convert the colors array to something like this:
function my_mce4_options($init) {
$default_colours = '"000000", "Black",
"993300", "Burnt orange",
"333300", "Dark olive",
"003300", "Dark green",
"003366", "Dark azure",
"000080", "Navy Blue",
"333399", "Indigo",
"333333", "Very dark gray",
"800000", "Maroon",
"FF6600", "Orange",
"808000", "Olive",
"008000", "Green",
"008080", "Teal",
"0000FF", "Blue",
"666699", "Grayish blue",
"808080", "Gray",
"FF0000", "Red",
"FF9900", "Amber",
"99CC00", "Yellow green",
"339966", "Sea green",
"33CCCC", "Turquoise",
"3366FF", "Royal blue",
"800080", "Purple",
"999999", "Medium gray",
"FF00FF", "Magenta",
"FFCC00", "Gold",
"FFFF00", "Yellow",
"00FF00", "Lime",
"00FFFF", "Aqua",
"00CCFF", "Sky blue",
"993366", "Red violet",
"FFFFFF", "White",
"FF99CC", "Pink",
"FFCC99", "Peach",
"FFFF99", "Light yellow",
"CCFFCC", "Pale green",
"CCFFFF", "Pale cyan",
"99CCFF", "Light sky blue",
"CC99FF", "Plum"';
$custom_colours = '"E14D43", "Color 1 Name",
"D83131", "Color 2 Name",
"ED1C24", "Color 3 Name",
"F99B1C", "Color 4 Name",
"50B848", "Color 5 Name",
"00A859", "Color 6 Name",
"00AAE7", "Color 7 Name",
"282828", "Color 8 Name"';
// build colour grid default+custom colors
$init['textcolor_map'] = '['.$default_colours.','.$custom_colours.']';
// enable 6th row for custom colours in grid
$init['textcolor_rows'] = 6;
return $init;
}
add_filter('tiny_mce_before_init', 'my_mce4_options');
Edit : The default swatch grid is 5x8 (ROWSxCOLS), to append custom colors after the default color grid we need to change the number of rows. The code above contains the changes, which are better explained in my blog post .
EDIT2 : There is now a color picker plugin - TinyMCE Color Picker , so all color related tweaks for WordPress 3.9 are now resolved!
Edit 3 : The color picker above is outdated. Here is the latest plugin as of September 2016 : https://wordpress.org/plugins/kt-tinymce-color-grid/
cheers