Browse Source

Add information about font color to guide.

Mateusz Samsel 6 years ago
parent
commit
baf0923902

File diff suppressed because it is too large
+ 3 - 0
packages/ckeditor5-font/docs/_snippets/features/custom-font-color-and-background-color-options.html


+ 209 - 0
packages/ckeditor5-font/docs/_snippets/features/custom-font-color-and-background-color-options.js

@@ -0,0 +1,209 @@
+/**
+ * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+import { CS_CONFIG } from '@ckeditor/ckeditor5-cloud-services/tests/_utils/cloud-services-config';
+
+/* globals ClassicEditor, console, window, document */
+ClassicEditor
+	.create( document.querySelector( '#snippet-custom-font-color-and-background-color-options' ), {
+		cloudServices: CS_CONFIG,
+		toolbar: {
+			items: [
+				'heading', '|', 'fontColor', 'fontBackgroundColor', 'bulletedList', 'numberedList', 'undo', 'redo'
+			],
+			viewportTopOffset: window.getViewportTopOffsetConfig()
+		},
+		fontBackgroundColor: {
+			colors: [
+				'hsl(0,0%,0%)',
+				'hsl(0,0%,12.5%)',
+				'hsl(0,0%,25%)',
+				'hsl(0,0%,37.5%)',
+				'hsl(0,0%,50%)',
+				'hsl(0,0%,62.50%)',
+				'hsl(0,0%,75%)',
+				'hsl(0,0%,87.5%)',
+				{
+					color: 'hsl(0,0%,100%)',
+					hasBorder: true
+				},
+				'hsl(0,100%,10%)',
+				'hsl(0,100%,20%)',
+				'hsl(0,100%,30%)',
+				'hsl(0,100%,40%)',
+				'hsl(0,100%,50%)',
+				'hsl(0,100%,60%)',
+				'hsl(0,100%,70%)',
+				'hsl(0,100%,80%)',
+				{
+					color: 'hsl(0,100%,90%)',
+					hasBorder: true
+				},
+				'hsl(30,100%,10%)',
+				'hsl(30,100%,20%)',
+				'hsl(30,100%,30%)',
+				'hsl(30,100%,40%)',
+				'hsl(30,100%,50%)',
+				'hsl(30,100%,60%)',
+				'hsl(30,100%,70%)',
+				'hsl(30,100%,80%)',
+				{
+					color: 'hsl(30,100%,90%)',
+					hasBorder: true
+				},
+				'hsl(60,100%,10%)',
+				'hsl(60,100%,20%)',
+				'hsl(60,100%,30%)',
+				'hsl(60,100%,40%)',
+				'hsl(60,100%,50%)',
+				'hsl(60,100%,60%)',
+				'hsl(60,100%,70%)',
+				'hsl(60,100%,80%)',
+				{
+					color: 'hsl(60,100%,90%)',
+					hasBorder: true
+				},
+				'hsl(90,100%,10%)',
+				'hsl(90,100%,20%)',
+				'hsl(90,100%,30%)',
+				'hsl(90,100%,40%)',
+				'hsl(90,100%,50%)',
+				'hsl(90,100%,60%)',
+				'hsl(90,100%,70%)',
+				'hsl(90,100%,80%)',
+				{
+					color: 'hsl(90,100%,90%)',
+					hasBorder: true
+				},
+				'hsl(120,100%,10%)',
+				'hsl(120,100%,20%)',
+				'hsl(120,100%,30%)',
+				'hsl(120,100%,40%)',
+				'hsl(120,100%,50%)',
+				'hsl(120,100%,60%)',
+				'hsl(120,100%,70%)',
+				'hsl(120,100%,80%)',
+				{
+					color: 'hsl(120,100%,90%)',
+					hasBorder: true
+				},
+				'hsl(150,100%,10%)',
+				'hsl(150,100%,20%)',
+				'hsl(150,100%,30%)',
+				'hsl(150,100%,40%)',
+				'hsl(150,100%,50%)',
+				'hsl(150,100%,60%)',
+				'hsl(150,100%,70%)',
+				'hsl(150,100%,80%)',
+				{
+					color: 'hsl(150,100%,90%)',
+					hasBorder: true
+				},
+				'hsl(180,100%,10%)',
+				'hsl(180,100%,20%)',
+				'hsl(180,100%,30%)',
+				'hsl(180,100%,40%)',
+				'hsl(180,100%,50%)',
+				'hsl(180,100%,60%)',
+				'hsl(180,100%,70%)',
+				'hsl(180,100%,80%)',
+				{
+					color: 'hsl(180,100%,90%)',
+					hasBorder: true
+				},
+				'hsl(210,100%,10%)',
+				'hsl(210,100%,20%)',
+				'hsl(210,100%,30%)',
+				'hsl(210,100%,40%)',
+				'hsl(210,100%,50%)',
+				'hsl(210,100%,60%)',
+				'hsl(210,100%,70%)',
+				'hsl(210,100%,80%)',
+				{
+					color: 'hsl(210,100%,90%)',
+					hasBorder: true
+				},
+				'hsl(240,100%,10%)',
+				'hsl(240,100%,20%)',
+				'hsl(240,100%,30%)',
+				'hsl(240,100%,40%)',
+				'hsl(240,100%,50%)',
+				'hsl(240,100%,60%)',
+				'hsl(240,100%,70%)',
+				'hsl(240,100%,80%)',
+				{
+					color: 'hsl(240,100%,90%)',
+					hasBorder: true
+				},
+				'hsl(270,100%,10%)',
+				'hsl(270,100%,20%)',
+				'hsl(270,100%,30%)',
+				'hsl(270,100%,40%)',
+				'hsl(270,100%,50%)',
+				'hsl(270,100%,60%)',
+				'hsl(270,100%,70%)',
+				'hsl(270,100%,80%)',
+				{
+					color: 'hsl(270,100%,90%)',
+					hasBorder: true
+				},
+				'hsl(300,100%,10%)',
+				'hsl(300,100%,20%)',
+				'hsl(300,100%,30%)',
+				'hsl(300,100%,40%)',
+				'hsl(300,100%,50%)',
+				'hsl(300,100%,60%)',
+				'hsl(300,100%,70%)',
+				'hsl(300,100%,80%)',
+				{
+					color: 'hsl(300,100%,90%)',
+					hasBorder: true
+				},
+				'hsl(330,100%,10%)',
+				'hsl(330,100%,20%)',
+				'hsl(330,100%,30%)',
+				'hsl(330,100%,40%)',
+				'hsl(330,100%,50%)',
+				'hsl(330,100%,60%)',
+				'hsl(330,100%,70%)',
+				'hsl(330,100%,80%)',
+				{
+					color: 'hsl(330,100%,90%)',
+					hasBorder: true
+				},
+			],
+			columns: 9
+		},
+		fontColor: {
+			colors: [
+				'black',
+				'gray',
+				'silver',
+				{
+					color: 'white',
+					hasBorder: true
+				},
+				'maroon',
+				'red',
+				'purple',
+				'fuchsia',
+				'green',
+				'lime',
+				'olive',
+				'yellow',
+				'navy',
+				'blue',
+				'teal',
+				'aqua'
+			],
+			columns: 4
+		}
+	} )
+	.then( editor => {
+		window.editor = editor;
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );

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

@@ -15,4 +15,12 @@
 		<span style="font-family: 'Courier New', Courier, monospace;">This text has the "Courier New, Courier, monospace" family set.</span>
 	</p>
 
+	<p>
+		<span style="color:hsl(90,75%,60%);background-color:hsl(240,75%,60%)">This text has light green color and blue background.</span>
+	</p>
+
+	<p>
+		<span style="color:hsl(0,0%,100%);background-color:hsl(0,0%,0%)">This text has white color and black background.</span>
+	</p>
+
 </div>

+ 11 - 1
packages/ckeditor5-font/docs/_snippets/features/font.js

@@ -12,7 +12,17 @@ ClassicEditor
 		cloudServices: CS_CONFIG,
 		toolbar: {
 			items: [
-				'heading', '|', 'fontSize', 'fontFamily', '|', 'bulletedList', 'numberedList', 'undo', 'redo'
+				'heading',
+				'|',
+				'fontSize',
+				'fontFamily',
+				'fontColor',
+				'fontBackgroundColor',
+				'|',
+				'bulletedList',
+				'numberedList',
+				'undo',
+				'redo'
 			],
 			viewportTopOffset: window.getViewportTopOffsetConfig()
 		}

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

@@ -8,6 +8,8 @@ category: features
 The {@link module:font/font~Font} plugin enables the following features in the editor:
 * {@link module:font/fontfamily~FontFamily} &ndash; Allows to change the font family by applying inline `<span>` elements with a `font-family` in the `style` attribute.
 * {@link module:font/fontsize~FontSize} &ndash; Allows to control the font size by applying inline `<span>` elements that either have a CSS class or a `font-size` in the `style` attribute.
+* {@link module:font/fontcolor~FontColor} &ndash; Allows to control the font color by applying inline `<span>` elements with a `color` in the `style` attribute.
+* {@link module:font/fontbackgroundcolor~FontBackgroundColor} &ndash; Allows to control the font background color by applying inline `<span>` elements with a `background-color` in the `style` attribute.
 
 ## Demo
 
@@ -145,6 +147,77 @@ ClassicEditor
 
 {@snippet features/custom-font-size-numeric-options}
 
+## Configuring font color and font background color
+
+Plugin enables `font color` and `font background color`. Which allows on using style `color` and `background-color` over text.
+<info-box info>
+	Please notice that you can turn on only one of those plugins. As well as configure them separately.
+</info-box>
+
+### Dropdown
+
+It is possible to configure which colors are available in dropdown in the editor. Use the `fontColor.colors` or `fontBackgroundColor.colors` configuration option to do so.
+
+It is possible to configure how many columns is shown in color dropdown. Use the `fontColor.columns` or `fontBackgroundColor.columns` configuration option to do so. This option also reflects to number of recently used colors section, which always have 1 row with amount of columns equal to `columns` configuration option.
+Default colors configuration is presented below:
+
+```js
+fontColor = {
+	colors: [
+		{
+			color: 'hsl(0, 0%, 0%)',
+			label: 'Black'
+		}, {
+			color: 'hsl(0, 0%, 30%)',
+			label: 'Dim grey'
+		}, {
+			color: 'hsl(0, 0%, 60%)',
+			label: 'Grey'
+		}, {
+			color: 'hsl(0, 0%, 90%)',
+			label: 'Light grey'
+		}, {
+			color: 'hsl(0, 0%, 100%)',
+			label: 'White',
+			hasBorder: true
+		}, {
+			color: 'hsl(0, 75%, 60%)',
+			label: 'Red'
+		}, {
+			color: 'hsl(30, 75%, 60%)',
+			label: 'Orange'
+		}, {
+			color: 'hsl(60, 75%, 60%)',
+			label: 'Yellow'
+		}, {
+			color: 'hsl(90, 75%, 60%)',
+			label: 'Light green'
+		}, {
+			color: 'hsl(120, 75%, 60%)',
+			label: 'Green'
+		}, {
+			color: 'hsl(150, 75%, 60%)',
+			label: 'Aquamarine'
+		}, {
+			color: 'hsl(180, 75%, 60%)',
+			label: 'Turquoise'
+		}, {
+			color: 'hsl(210, 75%, 60%)',
+			label: 'Light blue'
+		}, {
+			color: 'hsl(240, 75%, 60%)',
+			label: 'Blue'
+		}, {
+			color: 'hsl(270, 75%, 60%)',
+			label: 'Purple'
+		}
+	],
+	columns: 5
+}
+```
+
+{@snippet features/custom-font-color-and-background-color-options}
+
 ## Installation
 
 To add this feature to your editor, install the [`@ckeditor/ckeditor5-font`](https://www.npmjs.com/package/@ckeditor/ckeditor5-font) package:
@@ -161,7 +234,7 @@ import Font from '@ckeditor/ckeditor5-font/src/font';
 ClassicEditor
 	.create( document.querySelector( '#editor' ), {
 		plugins: [ Font, ... ],
-		toolbar: [ 'fontSize', 'fontFamily', ... ]
+		toolbar: [ 'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor', ... ]
 	} )
 	.then( ... )
 	.catch( ... );
@@ -256,6 +329,39 @@ The {@link module:font/fontsize~FontSize} plugin registers the following compone
 	editor.execute( 'fontSize' );
 	```
 
+The {@link module:font/fontcolor~FontColor} plugin registers the following components:
+
+* The `'fontColor'` dropdown,
+* The {@link module:font/fontcolor/fontcolorcommand~FontColorCommand `'fontColor'`} command.
+
+	The number of options and their names correspond to the {@link module:font/fontcolor~FontColorConfig#colors `fontColor.colors`}
+	and {@link module:font/fontcolor~FontColorConfig#columns `fontColor.columns`} configuration options.
+
+	You can change the font color of the current selection by executing the command with a desired value:
+
+	```js
+	editor.execute( 'fontColor', { value: rgb(30, 188, 97) } );
+	```
+
+	The `'fontColor'` command will accept any strings as values.
+
+The {@link module:font/fontbackgroundcolor~FontBackgroundColor} plugin registers the following components:
+
+* The `'fontColor'` dropdown,
+* The {@link module:font/fontbackgroundcolor/fontbackgroundcolorcommand~FontBackgroundColorCommand `'fontBackgroundColor'`} command.
+
+	The number of options and their names correspond to the {@link module:font/fontbackgroundcolor~FontBackgroundColorConfig#colors `fontBackgroundColor.colors`}
+	and {@link module:font/fontbackgroundcolor~FontBackgroundColorConfig#columns `fontBackgroundColor.columns`} configuration options.
+
+	You can change the font background color of the current selection by executing the command with a desired value:
+
+	```js
+	editor.execute( 'fontBackgroundColor', { value: rgb(30, 188, 97) } );
+	```
+
+	The `'fontBackgroundColor'` command will accept any strings as values.
+
+
 ## Contribute
 
 The source code of the feature is available on GitHub in https://github.com/ckeditor/ckeditor5-font.