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

Docs: Enabled EI and updated image styles guide. [skip ci]

Piotrek Koszuliński 8 лет назад
Родитель
Сommit
435722e76e

+ 19 - 13
packages/ckeditor5-image/docs/_snippets/features/image-caption.js

@@ -5,19 +5,25 @@
 
 /* globals ClassicEditor, console, window, document */
 
-ClassicEditor
-	.create( document.querySelector( '#snippet-image-caption' ), {
-		removePlugins: [ 'ImageStyle' ],
-		image: {
-			toolbar: [ 'imageTextAlternative' ]
-		},
-		toolbar: {
-			viewportTopOffset: 60
-		}
-	} )
-	.then( editor => {
-		window.editorCaption = editor;
+import getToken from '@ckeditor/ckeditor5-easy-image/tests/_utils/gettoken';
+
+getToken()
+	.then( token => {
+		ClassicEditor
+			.create( document.querySelector( '#snippet-image-caption' ), {
+				removePlugins: [ 'ImageStyle' ],
+				image: {
+					toolbar: [ 'imageTextAlternative' ]
+				},
+				toolbar: {
+					viewportTopOffset: 60
+				},
+				cloudServices: { token }
+			} )
+			.then( editor => {
+				window.editorCaption = editor;
+			} );
 	} )
 	.catch( err => {
-		console.error( err.stack );
+		console.error( err );
 	} );

+ 26 - 20
packages/ckeditor5-image/docs/_snippets/features/image-style-custom.js

@@ -5,29 +5,35 @@
 
 /* globals ClassicEditor, console, window, document */
 
-ClassicEditor
-	.create( document.querySelector( '#snippet-image-style-custom' ), {
-		image: {
-			styles: [
-				// This option is equal to a situation where no style is applied.
-				'imageStyleFull',
+import getToken from '@ckeditor/ckeditor5-easy-image/tests/_utils/gettoken';
 
-				// This represents an image aligned to left.
-				'imageStyleAlignLeft',
+getToken()
+	.then( token => {
+		ClassicEditor
+			.create( document.querySelector( '#snippet-image-style-custom' ), {
+				image: {
+					styles: [
+						// This option is equal to a situation where no style is applied.
+						'imageStyleFull',
 
-				// This represents an image aligned to right.
-				'imageStyleAlignRight'
-			],
+						// This represents an image aligned to left.
+						'imageStyleAlignLeft',
 
-			toolbar: [ 'imageTextAlternative', '|', 'imageStyleAlignLeft', 'imageStyleFull', 'imageStyleAlignRight' ]
-		},
-		toolbar: {
-			viewportTopOffset: 60
-		}
-	} )
-	.then( editor => {
-		window.editorStyleCustom = editor;
+						// This represents an image aligned to right.
+						'imageStyleAlignRight'
+					],
+
+					toolbar: [ 'imageTextAlternative', '|', 'imageStyleAlignLeft', 'imageStyleFull', 'imageStyleAlignRight' ]
+				},
+				toolbar: {
+					viewportTopOffset: 60
+				},
+				cloudServices: { token }
+			} )
+			.then( editor => {
+				window.editorStyleCustom = editor;
+			} );
 	} )
 	.catch( err => {
-		console.error( err.stack );
+		console.error( err );
 	} );

+ 15 - 9
packages/ckeditor5-image/docs/_snippets/features/image-style.js

@@ -5,15 +5,21 @@
 
 /* globals ClassicEditor, console, window, document */
 
-ClassicEditor
-	.create( document.querySelector( '#snippet-image-style' ), {
-		toolbar: {
-			viewportTopOffset: 60
-		}
-	} )
-	.then( editor => {
-		window.editorStyle = editor;
+import getToken from '@ckeditor/ckeditor5-easy-image/tests/_utils/gettoken';
+
+getToken()
+	.then( token => {
+		ClassicEditor
+			.create( document.querySelector( '#snippet-image-style' ), {
+				toolbar: {
+					viewportTopOffset: 60
+				},
+				cloudServices: { token }
+			} )
+			.then( editor => {
+				window.editorStyle = editor;
+			} );
 	} )
 	.catch( err => {
-		console.error( err.stack );
+		console.error( err );
 	} );

+ 19 - 13
packages/ckeditor5-image/docs/_snippets/features/image-toolbar.js

@@ -5,19 +5,25 @@
 
 /* globals ClassicEditor, console, window, document */
 
-ClassicEditor
-	.create( document.querySelector( '#snippet-image-toolbar' ), {
-		removePlugins: [ 'ImageCaption', 'ImageStyle' ],
-		image: {
-			toolbar: [ 'imageTextAlternative' ]
-		},
-		toolbar: {
-			viewportTopOffset: 60
-		}
-	} )
-	.then( editor => {
-		window.editorToolbar = editor;
+import getToken from '@ckeditor/ckeditor5-easy-image/tests/_utils/gettoken';
+
+getToken()
+	.then( token => {
+		ClassicEditor
+			.create( document.querySelector( '#snippet-image-toolbar' ), {
+				removePlugins: [ 'ImageCaption', 'ImageStyle' ],
+				image: {
+					toolbar: [ 'imageTextAlternative' ]
+				},
+				toolbar: {
+					viewportTopOffset: 60
+				},
+				cloudServices: { token }
+			} )
+			.then( editor => {
+				window.editorToolbar = editor;
+			} );
 	} )
 	.catch( err => {
-		console.error( err.stack );
+		console.error( err );
 	} );

+ 16 - 10
packages/ckeditor5-image/docs/_snippets/features/image.js

@@ -5,16 +5,22 @@
 
 /* globals ClassicEditor, console, window, document */
 
-ClassicEditor
-	.create( document.querySelector( '#snippet-image' ), {
-		removePlugins: [ 'ImageToolbar', 'ImageCaption', 'ImageStyle' ],
-		toolbar: {
-			viewportTopOffset: 60
-		}
-	} )
-	.then( editor => {
-		window.editorBasic = editor;
+import getToken from '@ckeditor/ckeditor5-easy-image/tests/_utils/gettoken';
+
+getToken()
+	.then( token => {
+		ClassicEditor
+			.create( document.querySelector( '#snippet-image' ), {
+				removePlugins: [ 'ImageToolbar', 'ImageCaption', 'ImageStyle' ],
+				toolbar: {
+					viewportTopOffset: 60
+				},
+				cloudServices: { token }
+			} )
+			.then( editor => {
+				window.editorBasic = editor;
+			} );
 	} )
 	.catch( err => {
-		console.error( err.stack );
+		console.error( err );
 	} );

+ 20 - 13
packages/ckeditor5-image/docs/features/image.md

@@ -136,20 +136,9 @@ ClassicEditor
 	.catch( ... );
 ```
 
-```css
-.image-style-align-left {
-    float: left;
-    width: 50%;
-    margin: 1em 1em 1em 0;
-}
-
-.image-style-align-right {
-    float: right;
-    width: 50%;
-    margin: 1em 0 1em 1em;
-}
+In the code sample above we used predefined image styles – `'imageStyleFull'`, `'imageStyleAlignLeft'` and `'imageStyleAlignRight'`. The latter two apply, respectively, `.image-style-align-left` and  `.image-style-align-right` classes to the `<figure>` element.
 
-```
+See the result below:
 
 {@snippet features/image-style-custom}
 
@@ -157,6 +146,24 @@ ClassicEditor
 	In the example above the options used represent simple "align left" and "align right" styles. Most text editors support left, center, right alignments, however, try not to think about CKEditor 5's image styles in this way. Try to understand what use cases the system needs to support and define semantical options accordingly. Defining useful and clear styles is one of the steps towards a good user experience and clear, portable output. For example, the "side image" style can be displayed as a floated image on wide screens and as a normal image on low resolution screens.
 </info-box>
 
+### Defining custom styles
+
+Besides using the {@link module:image/imagestyle/imagestyleengine~ImageStyleEngine.defaultStyles 5 predefined styles}:
+
+* `'imageStyleFull'`,
+* `'imageStyleSide'`,
+* `'imageStyleAlignLeft'`,
+* `'imageStyleAlignCenter'`,
+* `'imageStyleAlignRight'`
+
+you can also define your own styles or modify the existing ones.
+
+<info-box>
+	Reusing (or modifying) predefined styles has this advantage that CKEditor 5 will use its official translations for the defined button titles.
+</info-box>
+
+TODO (example)...
+
 ## Image upload
 
 TODO...

+ 3 - 2
packages/ckeditor5-image/src/imagestyle/imagestyleengine.js

@@ -204,7 +204,7 @@ ImageStyleEngine.defaultStyles = {
  * Default image style icons provided by the plugin, which can be referred in the
  * {@link module:image/image~ImageConfig#styles} config.
  *
- * There are 3 icons available: `'full'`, `'left'`, `'center'` and `'right'`.
+ * There are 4 icons available: `'full'`, `'left'`, `'center'` and `'right'`.
  *
  * @member {Object.<String, String>}
  */
@@ -236,7 +236,8 @@ function normalizeStyle( style ) {
 		else {
 			log.warn(
 				'image-style-not-found: There is no such image style of given name.',
-				{ name: style } );
+				{ name: style }
+			);
 
 			// Normalize the style anyway to prevent errors.
 			style = {