font-size.md 3.5 KB


title: Font size

category: features

{@snippet features/build-font-size-source}

The {@link module:font/fontsize~FontSize} feature enables support for setting font size.

Demo

{@snippet features/font-size}

Configuring font size options

It is possible to configure which font size options are supported by the editor. Use the {@link module:font/fontsize~FontSizeConfig#options fontSize.options} configuration option to do so. Use the special keyword 'normal' to use the default font size defined in the web page styles.

The font size feature supports two ways of defining configuration: using predefined (named) presets or simple numeric values.

Configuration using the predefined named presets

The font size feature defines 4 named presets:

  • 'tiny'
  • 'small'
  • 'big'
  • 'huge'

Each size is represented in the view as a <span> element with the text-* class. For example, the 'tiny' preset looks as follows in the editor data:

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

An example of the editor that supports only two font sizes:

ClassicEditor
	.create( document.querySelector( '#editor' ), {
		fontSize: {
			options: [
				'tiny',
				'normal',
				'big'
			]
		},
		toolbar: [
			'headings', 'bulletedList', 'numberedList', 'fontSize', 'undo', 'redo'
		]
	} )
	.then( ... )
	.catch( ... );

{@snippet features/custom-font-size-named-options}

Configuration using numeric presets

As an alternative, the font feature supports numeric values.

Each size is represented in the view as a <span> element with the font-size style set in px. For example, 14 will be represented in the editor data as:

<span style="font-size: 14px">...</span>

Here's an example of the editor that supports numeric font sizes (assuming that the 'normal' size is defined by CSS as 15px):

ClassicEditor
	.create( document.querySelector( '#editor' ), {
		fontSize: {
			options: [
				9,
				11,
				13,
				'normal',
				17,
				19,
				21
			]
		},
		toolbar: [
			'headings', 'bulletedList', 'numberedList', 'fontSize', 'undo', 'redo'
		]
	} )
	.then( ... )
	.catch( ... );

{@snippet features/custom-font-size-numeric-options}

Installation

To add this feature to your editor install the @ckeditor/ckeditor5-font package:

npm install --save @ckeditor/ckeditor5-font

And add it to your plugin list and the toolbar configuration:

import FontSize from '@ckeditor/ckeditor5-font/src/fontsize';

ClassicEditor
	.create( document.querySelector( '#editor' ), {
		plugins: [ FontSize, ... ],
		toolbar: [ 'fontSize', ... ]
	} )
	.then( ... )
	.catch( ... );

Read more about {@link builds/guides/development/installing-plugins installing plugins}.

Common API

The {@link module:font/fontsize~FontSize} plugin registers the following components:

  • The 'fontSize' dropdown,
  • The 'fontSize' command.

    The number of options and their names correspond to the {@link module:font/fontsize~FontSizeConfig#options fontSize.options} configuration option).

    You can change the font size of the current selection by executing the command with a desired value:

    // For numeric values:
    editor.execute( 'fontSize', { value: 10 } );
    
    // For named presets:
    editor.execute( 'fontSize', { value: 'small' } );
    

    passing an empty value will remove any fontSize set:

    editor.execute( 'fontSize' );
    

Contribute

The source code of the feature is available on GitHub in https://github.com/ckeditor/ckeditor5-font.