瀏覽代碼

Docs: Add Font Size feature guide.

Maciej Gołaszewski 7 年之前
父節點
當前提交
7e51096763

+ 17 - 0
packages/ckeditor5-font/docs/_snippets/features/build-font-size-source.html

@@ -0,0 +1,17 @@
+<style>
+	.text-tiny {
+		font-size: 0.7em;
+	}
+
+	.text-small {
+		font-size: 0.85em;
+	}
+
+	.text-big {
+		font-size: 1.4em;
+	}
+
+	.text-huge {
+		font-size: 1.8em;
+	}
+</style>

+ 14 - 0
packages/ckeditor5-font/docs/_snippets/features/build-font-size-source.js

@@ -0,0 +1,14 @@
+/**
+ * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* globals window */
+
+import ClassicEditor from '@ckeditor/ckeditor5-build-classic/src/ckeditor';
+
+import FontSize from '@ckeditor/ckeditor5-font/src/fontsize';
+
+ClassicEditor.build.plugins.push( FontSize );
+
+window.ClassicEditor = ClassicEditor;

+ 9 - 0
packages/ckeditor5-font/docs/_snippets/features/custom-font-size-named-options.html

@@ -0,0 +1,9 @@
+<div id="snippet-custom-font-size-named-options">
+	<h2>Font Size named options sample.</h2>
+
+	<p>
+		This is a mixed text with different sizes of text:
+		<span class="text-small">small</span> and
+		<span class="text-big">big</span>
+	</p>
+</div>

+ 28 - 0
packages/ckeditor5-font/docs/_snippets/features/custom-font-size-named-options.js

@@ -0,0 +1,28 @@
+/**
+ * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* globals ClassicEditor, console, window, document */
+ClassicEditor
+	.create( document.querySelector( '#snippet-custom-font-size-named-options' ), {
+		toolbar: {
+			items: [
+				'headings', 'bulletedList', 'numberedList', 'fontSize', 'undo', 'redo'
+			],
+			viewportTopOffset: 60
+		},
+		fontSize: {
+			options: [
+				'small',
+				'normal',
+				'big'
+			]
+		}
+	} )
+	.then( editor => {
+		window.editor = editor;
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );

+ 11 - 0
packages/ckeditor5-font/docs/_snippets/features/custom-font-size-numeric-options.html

@@ -0,0 +1,11 @@
+<div id="snippet-custom-font-size-numeric-options">
+	<h2>Font Size feature numeric options sample.</h2>
+
+	<p><span style="font-size: 9px">9px</span></p>
+	<p><span style="font-size: 11px">11px</span></p>
+	<p><span style="font-size: 13px">13px</span></p>
+	<p>Normal</p>
+	<p><span style="font-size: 17px">17px</span></p>
+	<p><span style="font-size: 19px">19px</span></p>
+	<p><span style="font-size: 21px">21px</span></p>
+</div>

+ 32 - 0
packages/ckeditor5-font/docs/_snippets/features/custom-font-size-numeric-options.js

@@ -0,0 +1,32 @@
+/**
+ * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* globals ClassicEditor, console, window, document */
+ClassicEditor
+	.create( document.querySelector( '#snippet-custom-font-size-numeric-options' ), {
+		toolbar: {
+			items: [
+				'headings', 'bulletedList', 'numberedList', 'fontSize', 'undo', 'redo'
+			],
+			viewportTopOffset: 60
+		},
+		fontSize: {
+			options: [
+				9,
+				11,
+				13,
+				'normal',
+				17,
+				19,
+				21
+			]
+		}
+	} )
+	.then( editor => {
+		window.editor = editor;
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );

+ 11 - 0
packages/ckeditor5-font/docs/_snippets/features/font-size.html

@@ -0,0 +1,11 @@
+<div id="snippet-font-size">
+	<h2>Font Size feature sample.</h2>
+
+	<p>
+		This is a mixed text with different sizes of text:
+		<span class="text-tiny">tiny</span>,
+		<span class="text-small">small</span>,
+		<span class="text-big">big</span> and
+		<span class="text-huge">huge</span>.
+	</p>
+</div>

+ 22 - 0
packages/ckeditor5-font/docs/_snippets/features/font-size.js

@@ -0,0 +1,22 @@
+/**
+ * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* globals ClassicEditor, console, window, document */
+
+ClassicEditor
+	.create( document.querySelector( '#snippet-font-size' ), {
+		toolbar: {
+			items: [
+				'headings', 'bulletedList', 'numberedList', 'fontSize', 'undo', 'redo'
+			],
+			viewportTopOffset: 60
+		}
+	} )
+	.then( editor => {
+		window.editor = editor;
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );

+ 1 - 1
packages/ckeditor5-font/docs/features/font-family.md

@@ -104,7 +104,7 @@ The {@link module:font/fontfamily~FontFamily} plugin registers:
 	* `'Trebuchet MS'`
 	* `'Verdana'` 
 	
-	passing empty value will remove any `fontFamily` set:
+	passing an empty value will remove any `fontFamily` set:
 	
 	```js
 	editor.execute( 'fontFamily' );

+ 146 - 0
packages/ckeditor5-font/docs/features/font-size.md

@@ -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.