Add custom text color WordPress 3.9 TinyMCE 4 Visual editor Add custom text color WordPress 3.9 TinyMCE 4 Visual editor wordpress wordpress

Add custom text color WordPress 3.9 TinyMCE 4 Visual editor


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