TinyMCE 4.7.11 – Enable hidden WordPress core plugins? (referencing a wp-includes from plugin.php)

by

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):