Ver Fonte

Merge pull request #7719 from ckeditor/i/7715

Docs (image): Added `ImageResize` plugin to the `Presentational styles` section demo. Closes #7715.

Docs (ckeditor5): Added`ImageResize` plugin to the `Inline Editor` example demo. See #7715.

Docs (image): Fixed configuration examples for `Using the dropdown` and `Using standalone buttons` sections. Closes #7716.

Docs (image): Added missing mandatory `icon` property to the `Using standalone buttons` configuration example. Closes #7717.
Maciej há 5 anos atrás
pai
commit
d546d5bdaf

+ 1 - 1
docs/_snippets/examples/inline-editor.html

@@ -9,7 +9,7 @@
 
 		<h4>Valletta</h4>
 
-		<figure class="image image-style-align-right">
+		<figure class="image image-style-align-right" style="width: 50%;">
 			<img alt="Picture of a sunlit facade of a Maltan building." src="%BASE_PATH%/assets/img/malta.jpg">
 			<figcaption>It's siesta time in Valletta.</figcaption>
 		</figure>

+ 29 - 2
docs/_snippets/examples/inline-editor.js

@@ -6,15 +6,42 @@
 /* globals console, window, document */
 
 import InlineEditor from '@ckeditor/ckeditor5-build-inline/src/ckeditor';
+import ImageResize from '@ckeditor/ckeditor5-image/src/imageresize';
 import { CS_CONFIG } from '@ckeditor/ckeditor5-cloud-services/tests/_utils/cloud-services-config';
 
 const inlineInjectElements = document.querySelectorAll( '#snippet-inline-editor [data-inline-inject]' );
 
 Array.from( inlineInjectElements ).forEach( inlineElement => {
 	const config = {
+		extraPlugins: [ ImageResize ],
 		image: {
-			toolbar: [ 'imageTextAlternative', '|', 'imageStyle:alignLeft', 'imageStyle:full', 'imageStyle:alignRight' ],
-			styles: [ 'full', 'alignLeft', 'alignRight' ]
+			resizeOptions: [
+				{
+					name: 'imageResize:original',
+					label: 'Original',
+					value: null
+				},
+				{
+					name: 'imageResize:50',
+					label: '50%',
+					value: '50'
+				},
+				{
+					name: 'imageResize:75',
+					label: '75%',
+					value: '75'
+				}
+			],
+			styles: [ 'full', 'alignLeft', 'alignRight' ],
+			toolbar: [
+				'imageStyle:alignLeft',
+				'imageStyle:full',
+				'imageStyle:alignRight',
+				'|',
+				'imageResize',
+				'|',
+				'imageTextAlternative'
+			]
 		},
 		toolbar: {
 			viewportTopOffset: window.getViewportTopOffsetConfig()

+ 1 - 1
packages/ckeditor5-image/docs/_snippets/features/image-style-presentational.html

@@ -7,7 +7,7 @@
 
 	<p>This is a right-aligned image:</p>
 
-	<figure class="image image-style-align-right">
+	<figure class="image image-style-align-right" style="width: 50%;">
 		<img src="%BASE_PATH%/assets/img/fields.jpg" alt="Autumn fields">
 	</figure>
 

+ 20 - 1
packages/ckeditor5-image/docs/_snippets/features/image-style-presentational.js

@@ -9,18 +9,37 @@ import { CS_CONFIG } from '@ckeditor/ckeditor5-cloud-services/tests/_utils/cloud
 
 ClassicEditor
 	.create( document.querySelector( '#snippet-image-style-custom' ), {
-		removePlugins: [ 'ImageResize', 'LinkImage' ],
+		removePlugins: [ 'LinkImage' ],
 		image: {
 			styles: [
 				'alignLeft',
 				'alignCenter',
 				'alignRight'
 			],
+			resizeOptions: [
+				{
+					name: 'imageResize:original',
+					label: 'Original',
+					value: null
+				},
+				{
+					name: 'imageResize:50',
+					label: '50%',
+					value: '50'
+				},
+				{
+					name: 'imageResize:75',
+					label: '75%',
+					value: '75'
+				}
+			],
 			toolbar: [
 				'imageStyle:alignLeft',
 				'imageStyle:alignCenter',
 				'imageStyle:alignRight',
 				'|',
+				'imageResize',
+				'|',
 				'imageTextAlternative'
 			]
 		},

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

@@ -280,18 +280,18 @@ const imageConfiguration = {
 	resizeOptions: [
 		{
 			name: 'imageResize:original',
-			label: 'Original size',
-			value: null
+			value: null,
+			label: 'Original'
 		},
 		{
 			name: 'imageResize:50',
-			label: '50%',
-			value: '50'
+			value: '50',
+			label: '50%'
 		},
 		{
 			name: 'imageResize:75',
-			label: '75%',
-			value: '75'
+			value: '75',
+			label: '75%'
 		}
 	],
 	toolbar: [ ..., 'imageResize' ]
@@ -311,25 +311,25 @@ const imageConfiguration = {
 	resizeOptions: [
 		{
 			name: 'imageResize:original',
-			label: 'Original size',
-			value: null
+			value: null,
+			icon: 'original'
 		},
 		{
 			name: 'imageResize:50',
-			label: '50%',
-			value: '50'
+			value: '50',
+			icon: 'medium'
 		},
 		{
 			name: 'imageResize:75',
-			label: '75%',
-			value: '75'
+			value: '75',
+			icon: 'large'
 		}
 	],
 	toolbar: [
 		...,
-		'imageResize:original',
 		'imageResize:50',
 		'imageResize:75'
+		'imageResize:original',
 	]
 }
 ```