FontColorConfig

interface

The configuration of the font color and font background color features. This option is used by the FontColorEditing and FontBackgroundColorEditing features.

ClassicEditor
	.create( {
		fontColor: ... // Font color feature configuration.
		fontBackgroundColor: ... // Font background color feature configuration.
	} )
	.then( ... )
	.catch( ... );

See all editor options.

See source

Properties

colorPicker : false | ColorPickerConfig | undefined

Configuration of the color picker feature.

If set to false the picker will not appear.

See source (with github icon)

`colors : Array<ColorOption> | undefined`

module:font/fontconfig~FontColorConfig#colors

Available font colors defined as an array of strings or objects.

The default value registers the following colors:

const fontColorConfig = {
	colors: [
		{
			color: 'hsl(0, 0%, 0%)',
			label: 'Black'
		},
		{
			color: 'hsl(0, 0%, 30%)',
			label: 'Dim grey'
		},
		{
			color: 'hsl(0, 0%, 60%)',
			label: 'Grey'
		},
		{
			color: 'hsl(0, 0%, 90%)',
			label: 'Light grey'
		},
		{
			color: 'hsl(0, 0%, 100%)',
			label: 'White',
			hasBorder: true
		},
		{
			color: 'hsl(0, 75%, 60%)',
			label: 'Red'
		},
		{
			color: 'hsl(30, 75%, 60%)',
			label: 'Orange'
		},
		{
			color: 'hsl(60, 75%, 60%)',
			label: 'Yellow'
		},
		{
			color: 'hsl(90, 75%, 60%)',
			label: 'Light green'
		},
		{
			color: 'hsl(120, 75%, 60%)',
			label: 'Green'
		},
		{
			color: 'hsl(150, 75%, 60%)',
			label: 'Aquamarine'
		},
		{
			color: 'hsl(180, 75%, 60%)',
			label: 'Turquoise'
		},
		{
			color: 'hsl(210, 75%, 60%)',
			label: 'Light blue'
		},
		{
			color: 'hsl(240, 75%, 60%)',
			label: 'Blue'
		},
		{
			color: 'hsl(270, 75%, 60%)',
			label: 'Purple'
		}
	]
};

Note: The colors are displayed in the 'fontColor' dropdown.

See source

columns : number | undefined

module:font/fontconfig~FontColorConfig#columns
Represents the number of columns in the font color dropdown.

The default value is:
```
const fontColorConfig = {
	columns: 5
}
```
Copy code
See source (with github icon)

`documentColors : number | undefined`

module:font/fontconfig~FontColorConfig#documentColors

Determines the maximum number of available document colors. Setting it to 0 will disable the document colors feature.

By default it equals to the columns value.

Examples:

// 1) Neither document colors nor columns are defined in the configuration.
// Document colors will equal 5,
// because the value will be inherited from columns,
// which has a predefined value of 5.
const fontColorConfig = {}

// 2) Document colors will equal 8, because the value will be inherited from columns.
const fontColorConfig = {
	columns: 8
}

// 3) Document colors will equal 24, because it has its own value defined.
const fontColorConfig = {
	columns: 8,
	documentColors: 24
}

// 4) The document colors feature will be disabled.
const fontColorConfig = {
	columns: 8,
	documentColors: 0
}

See source

FontColorConfig

Properties

`colorPicker : false | ColorPickerConfig | undefined`

`colors : Array<ColorOption> | undefined`

`columns : number | undefined`

`documentColors : number | undefined`