FontSizeConfig (font)
@ckeditor/ckeditor5-font/src/fontsize
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)>
module:font/fontsize~FontSizeConfig#options
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 thefontSize
attribute.Each
<span>
has the theclass
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 aString
):const fontSizeConfig = { options: [ 9, 10, 11, 12, 13, 14, 15 ] };
Also, you can define a label in the dropdown for numerical values:
const 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 thefontSize
attribute with the tiny value to the current selection:editor.execute( 'fontSize', { value: 'tiny' } );
Executing the
fontSize
command without value will remove thefontSize
attribute from the current selection. -
supportAllValues : Boolean
module:font/fontsize~FontSizeConfig#supportAllValues
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, thefont-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 totrue
:const 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.
Every day, we work hard to keep our documentation complete. Have you spotted outdated information? Is something missing? Please report it via our issue tracker.