0

I need a color picker for the visual editor (don't ask, not my idea).

I thought the TinyMCE colorpicker plugin was removed in WordPress 3.9.

However, I do see site/wp-includes/js/tinymce/plugins/colorpicker/plugin.min.js

Am I right to think colorpicker is still supported and just disabled?

If yes, how do I enable it from within site/wp-content/plugins/myplugin/plugin.php?

I was hoping just adding the button would work.

function smart_grid_tinymce_add_buttons( $buttons ) {   
    $buttons[] = 'colorpicker';

    return $buttons;
}
add_filter( 'mce_buttons', 'smart_grid_tinymce_add_buttons' );

But nope. So I think this means I need to somehow reference the wp-includes file, but I don't know how.

I'm a complete newb and help would be greatly appreciated.

1 Answer 1

0

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

1
  • 1
    Sally CJ to the rescue again - Thank you so much for the fast and complete answer - you rock!
    – user145691
    Jul 29, 2018 at 17:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.