Parcourir la source

Add ImageResize plugin to the presentational styles demo.

panr il y a 5 ans
Parent
commit
acb22f86ef

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

@@ -7,7 +7,7 @@
 
 
 	<p>This is a right-aligned image:</p>
 	<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">
 		<img src="%BASE_PATH%/assets/img/fields.jpg" alt="Autumn fields">
 	</figure>
 	</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
 ClassicEditor
 	.create( document.querySelector( '#snippet-image-style-custom' ), {
 	.create( document.querySelector( '#snippet-image-style-custom' ), {
-		removePlugins: [ 'ImageResize', 'LinkImage' ],
+		removePlugins: [ 'LinkImage' ],
 		image: {
 		image: {
 			styles: [
 			styles: [
 				'alignLeft',
 				'alignLeft',
 				'alignCenter',
 				'alignCenter',
 				'alignRight'
 				'alignRight'
 			],
 			],
+			resizeOptions: [
+				{
+					name: 'imageResize:original',
+					label: 'Original',
+					value: null
+				},
+				{
+					name: 'imageResize:50',
+					label: '50%',
+					value: '50'
+				},
+				{
+					name: 'imageResize:75',
+					label: '75%',
+					value: '75'
+				}
+			],
 			toolbar: [
 			toolbar: [
 				'imageStyle:alignLeft',
 				'imageStyle:alignLeft',
 				'imageStyle:alignCenter',
 				'imageStyle:alignCenter',
 				'imageStyle:alignRight',
 				'imageStyle:alignRight',
 				'|',
 				'|',
+				'imageResize',
+				'|',
 				'imageTextAlternative'
 				'imageTextAlternative'
 			]
 			]
 		},
 		},