WordPress 3.9 brings up the latest TinyMCE 4 rich text editor as great speed improvement, but\u00a0this update breaks a lot of TinyMCE plugins (advanced image, advanced link, etc), including\u00a0various handy\u00a0customizations for\u00a0TinyMCE editor in WP-way.<\/p>\n\n\n\n\n\n\n\n
One of them is\u00a0custom colour swatches.\u00a0Until 3.9 we simply put the following code to functions.php and got our colours in the editor:<\/p>\n\n\n\n
function my_mce3_options( $init ) {\n$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';\n$custom_colours = 'e14d43,d83131,ed1c24,f99b1c,50b848,00a859,00aae7,282828';\n$init['theme_advanced_text_colors'] = $default_colours . ',' . $custom_colours;\nreturn $init;\n}\nadd_filter('tiny_mce_before_init', 'my_mce3_options');<\/code><\/pre>\n\n\n\n<\/div>\n\n\n\n<\/a>Convert TinyMCE option for custom colour swatches to version 4<\/h2>\n\n\n\nThis solution will not work in WP 3.9, so we need to replace it with the working solution below (to be clear, the format of the colours array is changed, along with TinyMCE option name):<\/p>\n\n\n\n
function my_mce4_options( $init ) {\n$default_colours = '\n\t\"000000\", \"Black\",\n\t\"993300\", \"Burnt orange\",\n\t\"333300\", \"Dark olive\",\n\t\"003300\", \"Dark green\",\n\t\"003366\", \"Dark azure\",\n\t\"000080\", \"Navy Blue\",\n\t\"333399\", \"Indigo\",\n\t\"333333\", \"Very dark gray\",\n\t\"800000\", \"Maroon\",\n\t\"FF6600\", \"Orange\",\n\t\"808000\", \"Olive\",\n\t\"008000\", \"Green\",\n\t\"008080\", \"Teal\",\n\t\"0000FF\", \"Blue\",\n\t\"666699\", \"Grayish blue\",\n\t\"808080\", \"Gray\",\n\t\"FF0000\", \"Red\",\n\t\"FF9900\", \"Amber\",\n\t\"99CC00\", \"Yellow green\",\n\t\"339966\", \"Sea green\",\n\t\"33CCCC\", \"Turquoise\",\n\t\"3366FF\", \"Royal blue\",\n\t\"800080\", \"Purple\",\n\t\"999999\", \"Medium gray\",\n\t\"FF00FF\", \"Magenta\",\n\t\"FFCC00\", \"Gold\",\n\t\"FFFF00\", \"Yellow\",\n\t\"00FF00\", \"Lime\",\n\t\"00FFFF\", \"Aqua\",\n\t\"00CCFF\", \"Sky blue\",\n\t\"993366\", \"Brown\",\n\t\"C0C0C0\", \"Silver\",\n\t\"FF99CC\", \"Pink\",\n\t\"FFCC99\", \"Peach\",\n\t\"FFFF99\", \"Light yellow\",\n\t\"CCFFCC\", \"Pale green\",\n\t\"CCFFFF\", \"Pale cyan\",\n\t\"99CCFF\", \"Light sky blue\",\n\t\"CC99FF\", \"Plum\",\n\t\"FFFFFF\", \"White\"\n\t';\n$custom_colours = '\n\t\"e14d43\", \"Color 1 Name\",\n\t\"d83131\", \"Color 2 Name\",\n\t\"ed1c24\", \"Color 3 Name\",\n\t\"f99b1c\", \"Color 4 Name\",\n\t\"50b848\", \"Color 5 Name\",\n\t\"00a859\", \"Color 6 Name\",\n\t\"00aae7\", \"Color 7 Name\",\n\t\"282828\", \"Color 8 Name\"\n\t';\n$init['textcolor_map'] = '['.$default_colours.','.$custom_colours.']';\n$init['textcolor_rows'] = 6; \/\/ expand colour grid to 6 rows\nreturn $init;\n}\nadd_filter('tiny_mce_before_init', 'my_mce4_options');\n<\/code><\/pre>\n\n\n\nAs you can see, the option is changed from theme_advanced_text_colors<\/strong> to\u00a0textcolor_map<\/strong>, and a simple array of HEX codes separated by commas now is changed to\u00a0a JavaScript array that\u00a0threat\u00a0elements as pairs of HEX colour value and colour nice name. All is wrapped in brackets.<\/p>\n\n\n\n<\/div>\n\n\n\n<\/a>Change\u00a0the number of colour swatches<\/h2>\n\n\n\nPlease note, that my default TinyMCE 4 has a limit of up to 40 colour swatches (80 array elements) distributed in a 5×8 grid (ROWSxCOLS). So, to append custom colours after default colours, we need to increase the number of rows displayed on the swatches popup.<\/p>\n\n\n\n
To achieve this, we use textcolor_rows<\/strong> parameter.<\/p>\n\n\n\nWe even can change the grid layout and alter the default 5×8 with, for example, 4×10 by setting the parameters below:<\/p>\n\n\n\n
$init['textcolor_rows'] = 5;\n$init['textcolor_cols'] = 10;<\/code><\/pre>\n\n\n\nPlease note, this is just an example. You can play with the layout and colour set as you wish.<\/p>\n\n\n\n