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

Docs: Simplified the 'Configuring Image Styles' feature overview.

Aleksander Nowodzinski 8 лет назад
Родитель
Сommit
4548a4d70d

+ 4 - 25
packages/ckeditor5-image/docs/_snippets/features/image-style-custom.js

@@ -7,42 +7,21 @@
 
 
 import './image-style-custom.scss';
 import './image-style-custom.scss';
 
 
-import fullSizeIcon from '@ckeditor/ckeditor5-core/theme/icons/object-center.svg';
-import alignLeftIcon from '@ckeditor/ckeditor5-core/theme/icons/object-left.svg';
-import alignRightIcon from '@ckeditor/ckeditor5-core/theme/icons/object-right.svg';
-
 ClassicEditor
 ClassicEditor
 	.create( document.querySelector( '#snippet-image-style-custom' ), {
 	.create( document.querySelector( '#snippet-image-style-custom' ), {
 		image: {
 		image: {
 			styles: [
 			styles: [
 				// This option is equal to a situation where no style is applied.
 				// This option is equal to a situation where no style is applied.
-				{
-					name: 'imageStyleFull',
-					title: 'Full size image',
-					icon: fullSizeIcon,
-					value: null
-				},
+				'imageStyleFull',
 
 
 				// This represents an image aligned to left.
 				// This represents an image aligned to left.
-				{
-					name: 'imageStyleLeft',
-					title: 'Left aligned image',
-					icon: alignLeftIcon,
-					value: 'left',
-					className: 'image-style-left'
-				},
+				'imageStyleAlignLeft',
 
 
 				// This represents an image aligned to right.
 				// This represents an image aligned to right.
-				{
-					name: 'imageStyleRight',
-					title: 'Right aligned image',
-					icon: alignRightIcon,
-					value: 'right',
-					className: 'image-style-right'
-				}
+				'imageStyleAlignRight'
 			],
 			],
 
 
-			toolbar: [ 'imageTextAlternative', '|', 'imageStyleLeft', 'imageStyleFull', 'imageStyleRight' ]
+			toolbar: [ 'imageTextAlternative', '|', 'imageStyleAlignLeft', 'imageStyleFull', 'imageStyleAlignRight' ]
 		}
 		}
 	} )
 	} )
 	.then( editor => {
 	.then( editor => {

+ 2 - 2
packages/ckeditor5-image/docs/_snippets/features/image-style-custom.scss

@@ -1,13 +1,13 @@
 // Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
 // Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
 // For licensing, see LICENSE.md or http://ckeditor.com/license
 // For licensing, see LICENSE.md or http://ckeditor.com/license
 
 
-.image-style-left {
+.image-style-align-left {
     float: left;
     float: left;
     width: 50%;
     width: 50%;
     margin: 1em 1em 1em 0;
     margin: 1em 1em 1em 0;
 }
 }
 
 
-.image-style-right {
+.image-style-align-right {
     float: right;
     float: right;
     width: 50%;
     width: 50%;
     margin: 1em 0 1em 1em;
     margin: 1em 0 1em 1em;

+ 7 - 28
packages/ckeditor5-image/docs/features/image.md

@@ -111,45 +111,24 @@ Below you can see a demo of the editor with the image styles feature enabled. Th
 
 
 The available image styles can be configured using the {@link module:image/image~ImageConfig#styles `image.styles`} option.
 The available image styles can be configured using the {@link module:image/image~ImageConfig#styles `image.styles`} option.
 
 
-The following editor supports the default style plus left- and right-aligned images:
+The following editor supports the default full style plus left- and right-aligned images:
 
 
 ```js
 ```js
-import fullSizeIcon from '@ckeditor/ckeditor5-core/theme/icons/object-center.svg';
-import alignLeftIcon from '@ckeditor/ckeditor5-core/theme/icons/object-left.svg';
-import alignRightIcon from '@ckeditor/ckeditor5-core/theme/icons/object-right.svg';
-
 ClassicEditor
 ClassicEditor
 	.create( document.querySelector( '#editor' ), {
 	.create( document.querySelector( '#editor' ), {
 		image: {
 		image: {
 			// You need to configure the image toolbar too, so it uses the new style buttons.
 			// You need to configure the image toolbar too, so it uses the new style buttons.
-			toolbar: [ 'imageTextAlternative', '|', 'imageStyleLeft', 'imageStyleFull', 'imageStyleRight' ],
+			toolbar: [ 'imageTextAlternative', '|', 'imageStyleAlignLeft', 'imageStyleFull', 'imageStyleAlignRight' ],
 
 
 			styles: [
 			styles: [
 				// This option is equal to a situation where no style is applied.
 				// This option is equal to a situation where no style is applied.
-				{
-					name: 'imageStyleFull',
-					title: 'Full size image',
-					icon: fullSizeIcon,
-					value: null
-				},
+				'imageStyleFull',
 
 
 				// This represents an image aligned to left.
 				// This represents an image aligned to left.
-				{
-					name: 'imageStyleLeft',
-					title: 'Left aligned image',
-					icon: alignLeftIcon,
-					value: 'left',
-					className: 'image-style-left'
-				},
+				'imageStyleAlignLeft',
 
 
 				// This represents an image aligned to right.
 				// This represents an image aligned to right.
-				{
-					name: 'imageStyleRight',
-					title: 'Right aligned image',
-					icon: alignRightIcon,
-					value: 'right',
-					className: 'image-style-right'
-				}
+				'imageStyleAlignRight'
 			]
 			]
 		}
 		}
 	} )
 	} )
@@ -158,13 +137,13 @@ ClassicEditor
 ```
 ```
 
 
 ```css
 ```css
-.image-style-left {
+.image-style-align-left {
     float: left;
     float: left;
     width: 50%;
     width: 50%;
     margin: 1em 1em 1em 0;
     margin: 1em 1em 1em 0;
 }
 }
 
 
-.image-style-right {
+.image-style-align-right {
     float: right;
     float: right;
     width: 50%;
     width: 50%;
     margin: 1em 0 1em 1em;
     margin: 1em 0 1em 1em;