Sign up (with export icon)

FontSizeConfig

Api-interface icon 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( ... );
Copy code

See all editor options.

Properties

  • Chevron-right icon

    options : Array<string | number | FontSizeOption> | undefined

    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'
    	]
    };
    
    Copy code

    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>
    
    Copy code

    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 ]
    };
    
    Copy code

    Also, you can define a label in the dropdown for numerical values:

    const fontSizeConfig = {
    	options: [
    		{
    			title: 'Small',
    			model: '8px'
    		},
    		'default',
    		{
    		 	title: 'Big',
    		 	model: '14px'
    		}
    	]
    };
    
    Copy code

    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' } );
    
    Copy code

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

  • Chevron-right icon

    supportAllValues : boolean | undefined

    By default the plugin removes any font-size value that does not match the plugin's configuration. It means that if you paste content with font sizes that the editor does not understand, the font-size attribute will be removed and the content will be displayed with the default size.

    You can preserve pasted font size values by switching the supportAllValues option to true:

    const fontSizeConfig = {
    	options: [ 9, 10, 11, 12, 'default', 14, 15 ],
    	supportAllValues: true
    };
    
    Copy code

    Note: This option can only be used with numerical values as font size options.

    With this configuration font sizes not specified in the editor configuration will not be removed when pasting the content.