CKEditor Ecosystem Documentation
Search
Home/CKEditor 5/API
Interface

FontColorConfig (font)

@ckeditor/ckeditor5-font/src/fontcolor

interface
See source

The configuration of the font color feature. This option is used by the FontColorEditing feature.

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

See all editor options.

Filtering

Properties

  • colors : Array.<(String | Object)>

    See source

    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.

  • columns : Number

    See source

    Represents the number of columns in the font color dropdown.

    The default value is:

    const fontColorConfig = {
	columns: 5
}

  • documentColors : Number

    See source

    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
}