Add custom text color WordPress 3.9 TinyMCE 4 Visual editor

Question

I had a code snippet which would help me to add some custom color to the visual editor text color dropdown along with the default colors. I'm pasting the 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've tried a lot to fix it, but I am unable to do it, can you please help me out?

Answer 1

Option for text colours is textcolor_map and each colour's format is "color_hex", "color_name".

So, from your example, simply change option name and convert the colours 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: Default colour swatches grid is 5x8 (ROWSxCOLS), and to append custom colours after default colours grid, we need to alter number of rows. Change included in code above, and better explained in my blog post.

EDIT2: Now there is colour picker addon - TinyMCE Color Picker, so all colours related tweaks for WordPress 3.9 are solved now!

EDIT 3: The above color picker is outdated. This is the most current plugin as of September 2016: https://wordpress.org/plugins/kt-tinymce-color-grid/

Cheers