Am I right to think colorpicker is still supported and just disabled?
Yes, it is still supported; however, it’s not disabled, and it’s actually loaded by default by WordPress, because the textcolor
plugin (which is also loaded by default by WordPress) depends on the colorpicker
plugin.
I was hoping just adding the button would work.
No, because although the plugin exists, it does not add any button to the TinyMCE editor.
So, create the button manually using the addButton()
command.
Here’s how I did it using a custom TinyMCE plugin:
tinymce.PluginManager.add('mycolorpicker', function(editor) {
var default_color="#fffff",
_current_color;
// Callback when a color is picked.
function onColorPicked(color) {
alert('You picked ' + color);
_current_color = color; // save it
}
editor.addButton('mycolorpicker', {
text: 'Color Picker',
icon: false,
tooltip: 'Pick a color..',
onclick: function() {
var cp = editor.settings.color_picker_callback;
if (cp) {
// Opens the Color Picker.
cp(onColorPicked, _current_color || default_color);
}
}
});
return {
getMetadata: function () {
return {
name: 'My Color Picker',
url: 'http://example.com'
};
}
};
});
So you can save that to, for example, mycolorpicker.js
in your plugin’s “js” folder or a similar “assets” folder.
And then, load the plugin (as an external TinyMCE plugin) via the mce_external_plugins
filter:
add_filter( 'mce_external_plugins', function( $plugins ){
$plugins['mycolorpicker'] = 'path/to/mycolorpicker.js';
return $plugins;
} );
Finally, add the button (mycolorpicker
in the above example plugin) via the mce_buttons
filter. (Or use mce_buttons_2
to add the button to the second toolbar row, which by default, contains the “Text color” button)
add_filter( 'mce_buttons', function( $buttons ){
$buttons[] = 'mycolorpicker';
return $buttons;
} );
Try a demo of the plugin: https://codepen.io/anon/pen/djZjMo
Resources (TinyMCE):
-
TinyMCE’s
textcolor
andcolorpicker
plugins