|
|
@@ -13,7 +13,7 @@ The {@link module:font/font~Font} plugin enables the following features in the e
|
|
|
|
|
|
{@snippet features/font}
|
|
|
|
|
|
-## Configuring the font family
|
|
|
+## Configuring the font family feature
|
|
|
|
|
|
It is possible to configure which font family options are supported by the editor. Use the {@link module:font/fontfamily~FontFamilyConfig#options `fontFamily.options`} configuration option to do so.
|
|
|
|
|
|
@@ -41,7 +41,7 @@ ClassicEditor
|
|
|
|
|
|
{@snippet features/custom-font-family-options}
|
|
|
|
|
|
-## Configuring the font size
|
|
|
+## Configuring the font size feature
|
|
|
|
|
|
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.
|
|
|
|
|
|
@@ -49,13 +49,14 @@ Use the special `'normal'` keyword to use the default font size defined in the w
|
|
|
|
|
|
The font size feature supports two ways of defining configuration: using predefined (named) presets or simple numeric values.
|
|
|
|
|
|
-### Configuration using the predefined named presets
|
|
|
+### Using the predefined presets
|
|
|
|
|
|
The font size feature defines 4 named presets:
|
|
|
-- `'tiny'`
|
|
|
-- `'small'`
|
|
|
-- `'big'`
|
|
|
-- `'huge'`
|
|
|
+
|
|
|
+* `'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:
|
|
|
|
|
|
@@ -63,11 +64,9 @@ Each size is represented in the view as a `<span>` element with the `text-*` cla
|
|
|
<span class="text-tiny">...</span>
|
|
|
```
|
|
|
|
|
|
-The CSS definition for the classes (presets) must be included:
|
|
|
-- in the web page's styles where the editor runs (backend),
|
|
|
-- in the web page's styles where the edited content is rendered (frontend)
|
|
|
+The CSS definition for the classes (presets) must be included in the web page's styles where the edited content is rendered.
|
|
|
|
|
|
-Here's an example of the font size CSS classes:
|
|
|
+Here is an example of the font size CSS classes:
|
|
|
|
|
|
```css
|
|
|
.text-tiny {
|
|
|
@@ -109,7 +108,7 @@ ClassicEditor
|
|
|
|
|
|
{@snippet features/custom-font-size-named-options}
|
|
|
|
|
|
-### Configuration using numerical values
|
|
|
+### Using numerical values
|
|
|
|
|
|
The font feature also supports numerical values.
|
|
|
|
|
|
@@ -120,7 +119,7 @@ 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 numerical font sizes. Note that `'normal'` is controlled by the default styles of the web page:
|
|
|
+Here is an example of the editor that supports numerical font sizes. Note that `'normal'` is controlled by the default styles of the web page:
|
|
|
|
|
|
```js
|
|
|
ClassicEditor
|
|
|
@@ -202,6 +201,7 @@ The {@link module:font/fontfamily~FontFamily} plugin registers:
|
|
|
```
|
|
|
|
|
|
The `value` must correspond to the first font name in the configuration string. For the following default configuration:
|
|
|
+
|
|
|
```js
|
|
|
fontFamily.options = [
|
|
|
'default',
|
|
|
@@ -217,6 +217,7 @@ The {@link module:font/fontfamily~FontFamily} plugin registers:
|
|
|
```
|
|
|
|
|
|
the `fontFamily` command will accept the corresponding strings as values:
|
|
|
+
|
|
|
* `'Arial'`
|
|
|
* `'Courier New'`
|
|
|
* `'Georgia'`
|
|
|
@@ -253,6 +254,7 @@ The {@link module:font/fontsize~FontSize} plugin registers the following compone
|
|
|
```js
|
|
|
editor.execute( 'fontSize' );
|
|
|
```
|
|
|
+
|
|
|
## Contribute
|
|
|
|
|
|
The source code of the feature is available on GitHub in https://github.com/ckeditor/ckeditor5-font.
|