Interface

FontColorConfig (font)

@ckeditor/ckeditor5-font/src/fontconfig

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.

Filtering

Properties

  • colorPicker : false | ColorPickerConfig | undefined

    Configuration of the color picker feature.

    If set to false the picker will not appear.

  • colors : Array<ColorOption> | undefined

    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 | undefined

    Represents the number of columns in the font color dropdown.

    The default value is:

    const fontColorConfig = {
    	columns: 5
    }
    
  • documentColors : number | undefined

    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
    }