Browse Source

Docs: Merge font-family and font-size feature documentation into one page.

Maciej Gołaszewski 7 years ago
parent
commit
af3357d429

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


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

@@ -1,14 +0,0 @@
-/**
- * @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 FontFamily from '@ckeditor/ckeditor5-font/src/fontfamily';
-
-ClassicEditor.build.plugins.push( FontFamily );
-
-window.ClassicEditor = ClassicEditor;

packages/ckeditor5-font/docs/_snippets/features/build-font-size-source.html → packages/ckeditor5-font/docs/_snippets/features/build-font-source.html


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

@@ -7,8 +7,8 @@
 
 import ClassicEditor from '@ckeditor/ckeditor5-build-classic/src/ckeditor';
 
-import FontSize from '@ckeditor/ckeditor5-font/src/fontsize';
+import Font from '@ckeditor/ckeditor5-font/src/font';
 
-ClassicEditor.build.plugins.push( FontSize );
+ClassicEditor.build.plugins.push( Font );
 
 window.ClassicEditor = ClassicEditor;

+ 0 - 31
packages/ckeditor5-font/docs/_snippets/features/font-family.html

@@ -1,31 +0,0 @@
-<div id="snippet-font-family">
-	<h2>Font Family feature sample.</h2>
-
-	<p>
-		<span style="font-family: Arial, Helvetica, sans-serif;">This text has "Arial, Helvetica, sans-serif" family set.</span>
-	</p>
-
-	<p>
-		<span style="font-family: 'Courier New', Courier, monospace;">This text has "Courier New, Courier, monospace" family set.</span>
-	</p>
-
-	<p>
-		<span style="font-family: Georgia, serif;">This text has "Georgia, serif" family set.</span>
-	</p>
-
-	<p>
-		<span style="font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;">This text has "Lucida Sans Unicode, Lucida Grande, sans-serif" font family set.</span>
-	</p>
-
-	<p>
-		<span style="font-family: Tahoma, Geneva, sans-serif;">This text has "Tahoma, Geneva, sans-serif" font family set.</span>
-	</p>
-
-	<p>
-		<span style="font-family: 'Trebuchet MS', Helvetica, sans-serif;">This text has "Trebuchet MS, Helvetica, sans-serif" font family set.</span>
-	</p>
-
-	<p>
-		<span style="font-family: Verdana, Geneva, sans-serif;">This text has "Verdana, Geneva, sans-serif" font family set.</span>
-	</p>
-</div>

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

@@ -1,22 +0,0 @@
-/**
- * @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-family' ), {
-		toolbar: {
-			items: [
-				'headings', '|', 'bulletedList', 'numberedList', 'fontFamily', 'undo', 'redo'
-			],
-			viewportTopOffset: 60
-		}
-	} )
-	.then( editor => {
-		window.editor = editor;
-	} )
-	.catch( err => {
-		console.error( err.stack );
-	} );

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

@@ -1,11 +0,0 @@
-<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>

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

@@ -0,0 +1,20 @@
+<div id="snippet-font">
+	<h2>Font 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>
+
+	<p>
+		<span style="font-family: Arial, Helvetica, sans-serif;">This text has "Arial, Helvetica, sans-serif" family set.</span>
+	</p>
+
+	<p>
+		<span style="font-family: 'Courier New', Courier, monospace;">This text has "Courier New, Courier, monospace" family set.</span>
+	</p>
+
+</div>

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

@@ -6,10 +6,10 @@
 /* globals ClassicEditor, console, window, document */
 
 ClassicEditor
-	.create( document.querySelector( '#snippet-font-size' ), {
+	.create( document.querySelector( '#snippet-font' ), {
 		toolbar: {
 			items: [
-				'headings', '|', 'bulletedList', 'numberedList', 'fontSize', 'undo', 'redo'
+				'headings', '|', 'bulletedList', 'numberedList', 'fontSize', 'fontFamily', 'undo', 'redo'
 			],
 			viewportTopOffset: 60
 		}

+ 1 - 1
packages/ckeditor5-font/docs/api/font.md

@@ -10,7 +10,7 @@ This package implements the font family and font size features for CKEditor 5.
 
 ## Documentation
 
-See the {@link features/font-family Font family feature} and {@link features/font-size Font size feature} guides 
+See the {@link features/font Font feature} guide 
 with corresponding {@link module:font/fontfamily~FontFamily} and {@link module:font/fontsize~FontSize} plugin documentation.
 
 ## Installation

+ 0 - 116
packages/ckeditor5-font/docs/features/font-family.md

@@ -1,116 +0,0 @@
----
-title: Font family
-category: features
----
-
-{@snippet features/build-font-family-source}
-
-The {@link module:font/fontfamily~FontFamily} feature enables support for setting font family. This feature allows to control size of a text by inline `<span>` elements with a `font-family` CSS set in style attribute.
-
-## Demo
-
-{@snippet features/font-family}
-
-## Configuring font family options
-
-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.
-
-Use the special keyword `'default'` to use the default `font-family` defined in the web page styles — it disables the font family feature.
-
-For example, the following editor supports only two font families besides the "default" one:
-
-```js
-ClassicEditor
-	.create( document.querySelector( '#editor' ), {
-		fontFamily: {
-			options: [
-				'default',
-				'Ubuntu, Arial, sans-serif',
-				'Ubuntu Mono, Courier New, Courier, monospace'
-			]
-		},
-		toolbar: [
-			'headings', 'bulletedList', 'numberedList', 'fontFamily', 'undo', 'redo'
-		]
-	} )
-	.then( ... )
-	.catch( ... );
-```
-
-{@snippet features/custom-font-family-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 the toolbar configuration:
-
-```js
-import FontFamily from '@ckeditor/ckeditor5-font/src/fontfamily';
-
-ClassicEditor
-	.create( document.querySelector( '#editor' ), {
-		plugins: [ FontFamily, ... ],
-		toolbar: [ 'fontFamily', ... ]
-	} )
-	.then( ... )
-	.catch( ... );
-```
-
-<info-box info>
-	Read more about {@link builds/guides/development/installing-plugins installing plugins}.
-</info-box>
-
-## Common API
-
-The {@link module:font/fontfamily~FontFamily} plugin registers:
-
-* The `'fontFamily'` dropdown,
-* The {@link module:font/fontfamily/fontfamilycommand~FontFamilyCommand `'fontFamily'`} command.
-
-	The number of options and their names correspond to the {@link module:font/fontfamily~FontFamilyConfig#options `fontFamily.options`} configuration option.
-
-	You can change the font family of the current selection by executing the command with a desired value:
-
-	```js
-	editor.execute( 'fontFamily', { value: 'Arial' } );
-	```
-
-	The `value` must correspond to the first font name in the configuration string. For the following default configuration:
-	```js
-	fontFamily.options = [
-		'default',
-		'Arial, Helvetica, sans-serif',
-		'Courier New, Courier, monospace',
-		'Georgia, serif',
-		'Lucida Sans Unicode, Lucida Grande, sans-serif',
-		'Tahoma, Geneva, sans-serif',
-		'Times New Roman, Times, serif',
-		'Trebuchet MS, Helvetica, sans-serif',
-		'Verdana, Geneva, sans-serif'
-	]
-	```
-
-	the `fontFamily` command will accept the corresponding strings as values:
-	* `'Arial'`
-	* `'Courier New'`
-	* `'Georgia'`
-	* `'Lucida Sans Unicode'`
-	* `'Tahoma'`
-	* `'Times New Roman'`
-	* `'Trebuchet MS'`
-	* `'Verdana'`
-
-	Note that passing an empty value will remove the `fontFamily` from the selection (`default`):
-
-	```js
-	editor.execute( 'fontFamily' );
-	```
-
-## Contribute
-
-The source code of the feature is available on GitHub in https://github.com/ckeditor/ckeditor5-font.

+ 99 - 8
packages/ckeditor5-font/docs/features/font-size.md

@@ -1,15 +1,49 @@
 ---
-title: Font size
+title: Font
 category: features
 ---
 
-{@snippet features/build-font-size-source}
+{@snippet features/build-font-source}
 
-The {@link module:font/fontsize~FontSize} feature enables support for setting font size. This feature allows to control size of a text by inline `<span>` elements that have set either class or `font-size` CSS set in style attribute.
+The {@link module:font/font~Font} feature enables support for:
+* setting font family - which allows to control font face of a text by inline `<span>` elements with a `font-family` CSS set in style attribute.
+* setting font size - which allows to control size of a text by inline `<span>` elements that have set either class or `font-size` CSS set in style attribute.
+
+The font features can be used independently by using:
+* {@link module:font/fontfamily~FontFamily} to control font face of a text.
+* {@link module:font/fontsize~FontSize} to control size of a text.
 
 ## Demo
 
-{@snippet features/font-size}
+{@snippet features/font}
+
+## Configuring font family options
+
+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.
+
+Use the special keyword `'default'` to use the default `font-family` defined in the web page styles — it disables the font family feature.
+
+For example, the following editor supports only two font families besides the "default" one:
+
+```js
+ClassicEditor
+	.create( document.querySelector( '#editor' ), {
+		fontFamily: {
+			options: [
+				'default',
+				'Ubuntu, Arial, sans-serif',
+				'Ubuntu Mono, Courier New, Courier, monospace'
+			]
+		},
+		toolbar: [
+			'headings', 'bulletedList', 'numberedList', 'fontFamily', 'undo', 'redo'
+		]
+	} )
+	.then( ... )
+	.catch( ... );
+```
+
+{@snippet features/custom-font-family-options}
 
 ## Configuring font size options
 
@@ -127,12 +161,26 @@ npm install --save @ckeditor/ckeditor5-font
 And add it to your plugin list and the toolbar configuration:
 
 ```js
-import FontSize from '@ckeditor/ckeditor5-font/src/fontsize';
+import Font from '@ckeditor/ckeditor5-font/src/font';
 
 ClassicEditor
 	.create( document.querySelector( '#editor' ), {
-		plugins: [ FontSize, ... ],
-		toolbar: [ 'fontSize', ... ]
+		plugins: [ Font, ... ],
+		toolbar: [ 'fontSize', 'fontFamily', ... ]
+	} )
+	.then( ... )
+	.catch( ... );
+```
+
+or add one of the font features to your plugin list and the toolbar configuration:
+
+```js
+import FontFamily from '@ckeditor/ckeditor5-font/src/fontfamily';
+
+ClassicEditor
+	.create( document.querySelector( '#editor' ), {
+		plugins: [ FontFamily, ... ],
+		toolbar: [ 'fontFamily', ... ]
 	} )
 	.then( ... )
 	.catch( ... );
@@ -144,6 +192,50 @@ ClassicEditor
 
 ## Common API
 
+The {@link module:font/fontfamily~FontFamily} plugin registers:
+
+* The `'fontFamily'` dropdown,
+* The {@link module:font/fontfamily/fontfamilycommand~FontFamilyCommand `'fontFamily'`} command.
+
+	The number of options and their names correspond to the {@link module:font/fontfamily~FontFamilyConfig#options `fontFamily.options`} configuration option.
+
+	You can change the font family of the current selection by executing the command with a desired value:
+
+	```js
+	editor.execute( 'fontFamily', { value: 'Arial' } );
+	```
+
+	The `value` must correspond to the first font name in the configuration string. For the following default configuration:
+	```js
+	fontFamily.options = [
+		'default',
+		'Arial, Helvetica, sans-serif',
+		'Courier New, Courier, monospace',
+		'Georgia, serif',
+		'Lucida Sans Unicode, Lucida Grande, sans-serif',
+		'Tahoma, Geneva, sans-serif',
+		'Times New Roman, Times, serif',
+		'Trebuchet MS, Helvetica, sans-serif',
+		'Verdana, Geneva, sans-serif'
+	]
+	```
+
+	the `fontFamily` command will accept the corresponding strings as values:
+	* `'Arial'`
+	* `'Courier New'`
+	* `'Georgia'`
+	* `'Lucida Sans Unicode'`
+	* `'Tahoma'`
+	* `'Times New Roman'`
+	* `'Trebuchet MS'`
+	* `'Verdana'`
+
+	Note that passing an empty value will remove the `fontFamily` from the selection (`default`):
+
+	```js
+	editor.execute( 'fontFamily' );
+	```
+
 The {@link module:font/fontsize~FontSize} plugin registers the following components:
 
 * The `'fontSize'` dropdown,
@@ -165,7 +257,6 @@ 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.