8
0
Просмотр исходного кода

Add guid description for document colors, slightly improve samples used in documentation.

Mateusz Samsel 6 лет назад
Родитель
Сommit
0c36c0803c

+ 1 - 1
packages/ckeditor5-font/docs/_snippets/features/custom-font-color-and-background-color-options.html

@@ -1,6 +1,6 @@
 <div id="snippet-custom-font-color-and-background-color-options">
 <div id="snippet-custom-font-color-and-background-color-options">
 	<p><span style="color:yellow;background-color:hsl(0,0%,0%);">Text</span> in this <span style="color:white;background-color:hsl(0,100%,50%);">sample</span> <span style="color:aqua;background-color:hsl(240,100%,50%);">has</span> <span style="color:lime;background-color:hsl(300,100%,20%);">m</span><span style="color:lime;background-color:hsl(300,100%,30%);">u</span><span style="color:lime;background-color:hsl(300,100%,40%);">l</span><span style="background-color:hsl(300,100%,50%);">t</span><span style="background-color:hsl(300,100%,60%);">i</span><span style="background-color:hsl(300,100%,70%);">p</span><span style="background-color:hsl(300,100%,80%);">l</span><span style="background-color:hsl(300,100%,90%);">e</span> <span style="color:purple;">font colors</span> and <span style="background-color:hsl(120,100%,90%);">font background</span> <span style="color:red;background-color:hsl(0,0%,62.50%);">colors</span>.</p>
 	<p><span style="color:yellow;background-color:hsl(0,0%,0%);">Text</span> in this <span style="color:white;background-color:hsl(0,100%,50%);">sample</span> <span style="color:aqua;background-color:hsl(240,100%,50%);">has</span> <span style="color:lime;background-color:hsl(300,100%,20%);">m</span><span style="color:lime;background-color:hsl(300,100%,30%);">u</span><span style="color:lime;background-color:hsl(300,100%,40%);">l</span><span style="background-color:hsl(300,100%,50%);">t</span><span style="background-color:hsl(300,100%,60%);">i</span><span style="background-color:hsl(300,100%,70%);">p</span><span style="background-color:hsl(300,100%,80%);">l</span><span style="background-color:hsl(300,100%,90%);">e</span> <span style="color:purple;">font colors</span> and <span style="background-color:hsl(120,100%,90%);">font background</span> <span style="color:red;background-color:hsl(0,0%,62.50%);">colors</span>.</p>
 	<p>
 	<p>
-		Here are <span style="color:rgb(90%,100%,0%);background-color: #454545">some examples</span> of <span style="color:midnightblue;background-color:rgb(150,240,255)">custom colors</span> not defined in <span style="color:rgb(255, 186, 57);background-color:#442200">configuration</span> which will be recognized and used in <span style="color:rgb(150,250,150);background-color:#153">"recently used"</span> section.
+		Here are <span style="color:rgb(90%,100%,0%);background-color: #454545">some examples</span> of <span style="color:midnightblue;background-color:rgb(150,240,255)">custom colors</span> not defined in <span style="color:rgb(255, 186, 57);background-color:#442200">configuration</span> which might be recognized and used in <span style="color:rgb(150,250,150);background-color:#153">"document colors"</span> section.
 	</p>
 	</p>
 </div>
 </div>

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

@@ -174,7 +174,8 @@ ClassicEditor
 					hasBorder: true
 					hasBorder: true
 				},
 				},
 			],
 			],
-			columns: 9
+			columns: 9,
+			documentColors: 18
 		},
 		},
 		fontColor: {
 		fontColor: {
 			colors: [
 			colors: [
@@ -198,7 +199,8 @@ ClassicEditor
 				'teal',
 				'teal',
 				'aqua'
 				'aqua'
 			],
 			],
-			columns: 4
+			columns: 4,
+			documentColors: 12
 		}
 		}
 	} )
 	} )
 	.then( editor => {
 	.then( editor => {

+ 29 - 0
packages/ckeditor5-font/docs/features/font.md

@@ -256,6 +256,35 @@ ClassicEditor
 	.catch( ... );
 	.catch( ... );
 ```
 ```
 
 
+### Documents colors
+
+Plugin contains special section with document colors. In this additional grid are presented colors found in currently edited document. Colors are read from the beginning of document to its end. Duplicated colors are not inserted multiple times. Only limited number of colors is displayed in this grid. You can mange how many document colors is displayed by changing {@link module:font/fontcolor~FontColorConfig#documentColors `fontColor.documentColors`} or {@link module:font/fontbackgroundcolor~FontBackgroundColorConfig#documentColors `fontBackgroundColor.documentColors`} value. By default its value equals to {@link module:font/fontcolor~FontColorConfig#columns `fontColor.columns`} or {@link module:font/fontbackgroundcolor~FontBackgroundColorConfig#columns `fontBackgroundColor.columns`}. This results with one row of document colors available in dropdown.
+
+Setting `documentColors` value to `0` will disable this feature.
+
+If edited document doesn't contain any font color or background colors, then document colors section will be hidden until text with proper color value appear.
+
+```js
+ClassicEditor
+	.create( document.querySelector( '#editor' ), {
+		fontColor: {
+			documentColors: 10,
+
+			// ...
+		},
+		fontBackgroundColor: {
+			documentColors: 0, // disables feature
+
+			// ...
+		},
+		toolbar: [
+			'heading', 'bulletedList', 'numberedList', 'fontColor', 'fontBackgroundColor', 'undo', 'redo'
+		]
+	} )
+	.then( ... )
+	.catch( ... );
+```
+
 ## Installation
 ## Installation
 
 
 To add this feature to your editor, install the [`@ckeditor/ckeditor5-font`](https://www.npmjs.com/package/@ckeditor/ckeditor5-font) package:
 To add this feature to your editor, install the [`@ckeditor/ckeditor5-font`](https://www.npmjs.com/package/@ckeditor/ckeditor5-font) package:

+ 1 - 4
packages/ckeditor5-font/tests/manual/font-color.js

@@ -30,10 +30,7 @@ ClassicEditor
 			'blockQuote',
 			'blockQuote',
 			'undo',
 			'undo',
 			'redo'
 			'redo'
-		],
-		fontColor: {
-			documentColors: 7
-		}
+		]
 	} )
 	} )
 	.then( editor => {
 	.then( editor => {
 		window.editor = editor;
 		window.editor = editor;