FontSizeConfig
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 codeSee all editor options.
Properties
options?: Array<string | number | FontSizeOption>module:font/fontconfig~FontSizeConfig#optionsAvailable font size options. Expressed as predefined presets, numerical "pixel" values or the
FontSizeOption.The default value is:
Copy codeconst 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 thefontSizeattribute.Each
<span>has the theclassattribute set to the corresponding size name. For instance, this is what the small size looks like in the view:
Copy code<span class="text-small">...</span>As an alternative, the font size might be defined using numerical values (either as a
Numberor as aString):
Copy codeconst fontSizeConfig = { options: [ 9, 10, 11, 12, 13, 14, 15 ] };Also, you can define a label in the dropdown for numerical values:
Copy codeconst fontSizeConfig = { options: [ { title: 'Small', model: '8px' }, 'default', { title: 'Big', model: '14px' } ] };Font size can be applied using the command API. To do that, use the
'fontSize'command and pass the desired font size as avalue. For example, the following code will apply thefontSizeattribute with the tiny value to the current selection:
Copy codeeditor.execute( 'fontSize', { value: 'tiny' } );Executing the
fontSizecommand without value will remove thefontSizeattribute from the current selection.supportAllValues?: booleanmodule:font/fontconfig~FontSizeConfig#supportAllValuesBy default the plugin removes any
font-sizevalue that does not match the plugin's configuration. It means that if you paste content with font sizes that the editor does not understand, thefont-sizeattribute will be removed and the content will be displayed with the default size.You can preserve pasted font size values by switching the
supportAllValuesoption totrue:
Copy codeconst fontSizeConfig = { options: [ 9, 10, 11, 12, 'default', 14, 15 ], supportAllValues: true };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.