Report an issue
Interface

FontColorConfig (font)

@ckeditor/ckeditor5-font/src/fontcolor

interface

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.

    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.

    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.

    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
    }