Color Picker Plugin

The colorpicker plugin adds an HSV color picker dialog to the editor. When activated in conjunction with the textcolor plugin it adds a "custom color" button to the text color toolbar dropdown. When a user clicks "custom color" a modal will open presenting a color wheel so that the user can choose their own colors (rather than the ones defined by textcolor) to be applied to text and/or the selected text's background.

The plugin hooks into the color_picker_callback so you provide your own color picker specification to the user.

Type: String

Example

In this example you'll note that we have also activated the textcolor plugin. This is necessary because in a typical TinyMCE installation colorpicker is dependent on activation of textcolor. Try it out. Remove textcolor and see what happens.

tinymce.init({
  selector: "textarea",  // change this value according to your HTML
  plugins: "textcolor colorpicker",
  toolbar: "forecolor backcolor"
});

color_picker_callback

This option enables you to provide your own color picker.

Example

tinymce.init({
  selector: "textarea",  // change this value according to your HTML
  plugins: "textcolor colorpicker",
  toolbar: "forecolor backcolor"
  color_picker_callback: function(callback, value) {
    callback('#FF00FF');
  }
});

Can't find what you're looking for? Let us know.

Except as otherwise noted, the content of this page is licensed under the Creative Commons BY-NC-SA 3.0 License, and code samples are licensed under the Apache 2.0 License.