@ -6,37 +6,4 @@ description: Select a color from a pallete.
keywords: colorpicker color color_picker_callback
---
The `colorpicker` plugin adds an HSV color picker dialog to the editor. When activated **in conjunction with** the [textcolor plugin](../textcolor/) 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`](#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.
```js
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
```js
tinymce.init({
selector: "textarea", // change this value according to your HTML
With the release TinyMCE 5.0 the color picker plugin has been combined into the editor core. Accordingly, the Color Picker documentation has been moved into the core as well.
This plugin adds the forecolor/backcolor button controls that enable you to pick colors from a color picker and apply these to text. It adds a toolbar button to enable this functionality.
**Type:** `String`
##### Example
```js
tinymce.init({
selector: "textarea", // change this value according to your html
plugins: "textcolor",
toolbar: "forecolor backcolor"
});
```
### Options
These settings affect the execution of the `textcolor` plugin. The dimensions and mapping of the grid of text colors may be set here.
### `textcolor_cols`
This option allows you to specify how many columns appear on the grid of text colors.
**Type:** `String`
**Default Value:** `"8"`
##### Example
```js
tinymce.init({
selector: "textarea", // change this value according to your HTML
plugins: "textcolor",
toolbar: "forecolor backcolor",
textcolor_cols: "5"
});
```
### `textcolor_rows`
This option allows you to specify how many rows appear on the grid of text colors.
**Type:** `String`
**Default Value:** `"5"`
##### Example
```js
tinymce.init({
selector: "textarea", // change this value according to your HTML
plugins: "textcolor",
toolbar: "forecolor backcolor",
textcolor_rows: "4"
});
```
### `textcolor_map`
This option allows you to specify a map of the text colors that will appear in the grid.
**Type:** `Array`
##### Example
```js
tinymce.init({
selector: "textarea", // change this value according to your HTML
plugins: "textcolor",
toolbar: "forecolor backcolor",
textcolor_map: [
"000000", "Black",
"993300", "Burnt orange",
"333300", "Dark olive",
"003300", "Dark green",
"003366", "Dark azure",
"000080", "Navy Blue",
"333399", "Indigo",
"333333", "Very dark gray",
"800000", "Maroon",
"FF6600", "Orange",
"808000", "Olive",
"008000", "Green",
"008080", "Teal",
"0000FF", "Blue",
"666699", "Grayish blue",
"808080", "Gray",
"FF0000", "Red",
"FF9900", "Amber",
"99CC00", "Yellow green",
"339966", "Sea green",
"33CCCC", "Turquoise",
"3366FF", "Royal blue",
"800080", "Purple",
"999999", "Medium gray",
"FF00FF", "Magenta",
"FFCC00", "Gold",
"FFFF00", "Yellow",
"00FF00", "Lime",
"00FFFF", "Aqua",
"00CCFF", "Sky blue",
"993366", "Red violet",
"FFFFFF", "White",
"FF99CC", "Pink",
"FFCC99", "Peach",
"FFFF99", "Light yellow",
"CCFFCC", "Pale green",
"CCFFFF", "Pale cyan",
"99CCFF", "Light sky blue",
"CC99FF", "Plum"
]
});
```
With the release TinyMCE 5.0 the text color plugin has been combined into the editor core. Accordingly, the Text Color documentation has been moved into the core as well.
shikha
7 years ago