|
|
@@ -0,0 +1,146 @@
|
|
|
+---
|
|
|
+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, 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.
|
|
|
+
|
|
|
+### Configuration using predefined named presets
|
|
|
+
|
|
|
+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:
|
|
|
+
|
|
|
+```html
|
|
|
+<span class="text-tiny">...</span>
|
|
|
+```
|
|
|
+
|
|
|
+Below is the editor that will support only two font sizes:
|
|
|
+
|
|
|
+```js
|
|
|
+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 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:
|
|
|
+
|
|
|
+```html
|
|
|
+<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`:
|
|
|
+
|
|
|
+```js
|
|
|
+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`](https://www.npmjs.com/package/@ckeditor/ckeditor5-font) package:
|
|
|
+
|
|
|
+```
|
|
|
+npm install --save @ckeditor/ckeditor5-font
|
|
|
+```
|
|
|
+
|
|
|
+And add it to your plugin list and toolbar configuration:
|
|
|
+
|
|
|
+```js
|
|
|
+import FontSize from '@ckeditor/ckeditor5-font/src/fontsize';
|
|
|
+
|
|
|
+ClassicEditor
|
|
|
+ .create( document.querySelector( '#editor' ), {
|
|
|
+ plugins: [ FontSize, ... ],
|
|
|
+ toolbar: [ 'fontSize', ... ]
|
|
|
+ } )
|
|
|
+ .then( ... )
|
|
|
+ .catch( ... );
|
|
|
+```
|
|
|
+
|
|
|
+<info-box info>
|
|
|
+ Read more about {@link builds/guides/development/installing-plugins installing plugins}.
|
|
|
+</info-box>
|
|
|
+
|
|
|
+## Common API
|
|
|
+
|
|
|
+The {@link module:font/fontsize~FontSize} plugin registers:
|
|
|
+
|
|
|
+* Dropdown: `'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:
|
|
|
+
|
|
|
+ ```js
|
|
|
+ // 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:
|
|
|
+
|
|
|
+ ```js
|
|
|
+ editor.execute( 'fontSize' );
|
|
|
+ ```
|
|
|
+
|
|
|
+## Contribute
|
|
|
+
|
|
|
+The source code of the feature is available on GitHub in https://github.com/ckeditor/ckeditor5-font.
|