Przeglądaj źródła

Docs: Add Font Family feature guide.

Maciej Gołaszewski 8 lat temu
rodzic
commit
ba01320d3e

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


+ 14 - 0
packages/ckeditor5-font/docs/_snippets/features/build-font-family-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 FontFamily from '@ckeditor/ckeditor5-font/src/fontfamily';
+
+ClassicEditor.build.plugins.push( FontFamily );
+
+window.ClassicEditor = ClassicEditor;

+ 13 - 0
packages/ckeditor5-font/docs/_snippets/features/custom-font-family-options.html

@@ -0,0 +1,13 @@
+<link href="https://fonts.googleapis.com/css?family=Ubuntu|Ubuntu+Mono" rel="stylesheet">
+
+<div id="snippet-custom-font-family-options">
+	<h2>Font Family feature sample.</h2>
+
+	<p>
+		<span style="font-family: Ubuntu, Arial, sans-serif;">This text has "Ubuntu, Arial, Helvetica, sans-serif" font family set.</span>
+	</p>
+
+	<p>
+		<span style="font-family: 'Ubuntu Mono', 'Courier New', Courier, monospace;">This text has "Ubuntu Mono, Courier New, Courier, monospace" font family set.</span>
+	</p>
+</div>

+ 28 - 0
packages/ckeditor5-font/docs/_snippets/features/custom-font-family-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-family-options' ), {
+		toolbar: {
+			items: [
+				'headings', 'bulletedList', 'numberedList', 'fontFamily', 'undo', 'redo'
+			],
+			viewportTopOffset: 60
+		},
+		fontFamily: {
+			options: [
+				'default',
+				'Ubuntu, Arial, sans-serif',
+				'Ubuntu Mono, Courier New, Courier, monospace'
+			]
+		}
+	} )
+	.then( editor => {
+		window.editor = editor;
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );

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

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

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

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

@@ -0,0 +1,115 @@
+---
+title: Font family
+category: features
+---
+
+{@snippet features/build-font-family-source}
+
+The {@link module:font/fontfamily~FontFamily} feature enables support for setting font family.
+
+## Demo
+
+{@snippet features/font-family}
+
+## Configuring font family options
+
+It is, of course, possible to configure which font family options the editor should support. Use the {@link module:font/fontfamily~FontFamilyConfig#options `fontFamiliy.options`} configuration option to do so.
+Use special keyword `'default'` to use document's default font family as defined in CSS.
+
+For example, the following editor will support only two font families besides "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 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:
+
+* Dropdown: `'fontFamily'`.
+* Command: `'fontFamily'`.
+
+	The number of options and their names are based on the {@link module:font/fontfamily~FontFamilyConfig#options `fontFamily.options`} configuration option).
+
+	You can change font family of the current selection by executing command with proper value:
+
+	```js
+	editor.execute( 'fontFamily', { value: 'Arial' } );
+	```
+
+	The Value passed to `family` corresponds to the first font name in configuration string. For 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 strings below as value:
+	* `'Arial'`
+	* `'Courier New'`
+	* `'Georgia'`
+	* `'Lucida Sans Unicode'`
+	* `'Tahoma'`
+	* `'Times New Roman'`
+	* `'Trebuchet MS'`
+	* `'Verdana'` 
+	
+	passing empty value will remove any `fontFamily` set:
+	
+	```js
+	editor.execute( 'fontFamily' );
+	```
+
+## Contribute
+
+The source code of the feature is available on GitHub in https://github.com/ckeditor/ckeditor5-font.