Report an issue
Interface

FontSizeConfig (font)

@ckeditor/ckeditor5-font/src/fontsize

interface

The configuration of the font size feature. This option is used by the FontSizeEditing feature.

ClassicEditor
    .create( {
        fontSize: ... // Font size feature configuration.
    } )
    .then( ... )
    .catch( ... );

See all editor options.

Filtering

Properties

  • options : Array.<(String | Number | FontSizeOption)>

    Available font size options. Expressed as predefined presets, numerical "pixel" values or the FontSizeOption.

    The default value is:

    const fontSizeConfig = {
        options: [
            'tiny',
            'small',
            'default',
            'big',
            'huge'
        ]
    };

    It defines 4 sizes: tiny, small, big, and huge. These values will be rendered as <span> elements in the view. The default defines a text without the fontSize attribute.

    Each <span> has the the class attribute set to the corresponding size name. For instance, this is what the small size looks like in the view:

    <span class="text-small">...</span>

    As an alternative, the font size might be defined using numerical values (either as a Number or as a String):

    const fontSizeConfig = {
        options: [ 9, 10, 11, 12, 13, 14, 15 ]
    };

    Font size can be applied using the command API. To do that, use the fontSize command and pass the desired font size as a value. For example, the following code will apply the fontSize attribute with the tiny value to the current selection:

    editor.execute( 'fontSize', { value: 'tiny' } );

    Executing the fontSize command without value will remove the fontSize attribute from the current selection.