title: Font size
{@snippet features/build-font-size-source}
The {@link module:font/fontsize~FontSize} feature enables support for setting font size.
{@snippet features/font-size}
It is, of course, possible to configure which font size options the editor should support. Use the {@link module:font/fontsize~FontSizeConfig#options fontSize.options} configuration option to do so.
Use special keyword 'normal' to use document's normal font size as defined in CSS.
The font size feature supports two ways of defining configuration using either predefined named presets or numeric values.
The font size feature defines 4 named presets:
'tiny''small''big''huge'Each size will be represented in the view as <span> element with text-* class set. For example for 'tiny' preset the editor will output:
<span class="text-tiny">...</span>
Below is the editor that will support 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}
As an alternative the font feature supports numeric values as options.
Each size will be represented in the view as <span> element with font-size style set as px value.
For example for 14 the editor will output:
<span style="font-size: 14px">...</span>
Below is the editor that will support numeric font sizes (it is assumed that '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}
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 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}.
The {@link module:font/fontsize~FontSize} plugin registers:
'fontSize'.Command: 'fontSize'.
The number of options and their names are based on the {@link module:font/fontsize~FontSizeConfig#options fontSize.options} configuration option).
You can change font size of the current selection by executing command with proper 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' );
The source code of the feature is available on GitHub in https://github.com/ckeditor/ckeditor5-font.