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

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

    See source

    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

    Represents the number of columns in the font color dropdown.

    See source

    The default value is:

    const fontColorConfig = {
    columns: 5
}

  • documentColors : Number

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

    See source

    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
}