8
0
panr 5 лет назад
Родитель
Сommit
f4e1ac6678

+ 23 - 1
packages/ckeditor5-image/tests/manual/imageresizeui.html

@@ -2,9 +2,31 @@
 	.fancy-editor-wrapper figure {
 	.fancy-editor-wrapper figure {
 		padding: 20px;
 		padding: 20px;
 	}
 	}
+
+	.ck-editor {
+		max-width: 800px;
+	}
+
+	h2.header {
+		background: hsl(0, 0%, 90%);
+	}
 </style>
 </style>
 
 
-<div id="editor">
+<h2 class="header">Dropdown</h2>
+
+<div id="editor1">
+	<h2>Responsive image (width style: not set, width attribute present on the image)</h2>
+
+	<figure class="image">
+		<img alt="Picture of the Warsaw Old Town." width="488" srcset="https://33333.cdn.cke-cs.com/0fNqCUeBSal4ENvGfd7K/images/c12cb88e596270d8d963b7c87bef1767880f42d94fb2ec43_warsaw01.jpg/w_430 430w, https://33333.cdn.cke-cs.com/0fNqCUeBSal4ENvGfd7K/images/c12cb88e596270d8d963b7c87bef1767880f42d94fb2ec43_warsaw01.jpg/w_860 860w, https://33333.cdn.cke-cs.com/0fNqCUeBSal4ENvGfd7K/images/c12cb88e596270d8d963b7c87bef1767880f42d94fb2ec43_warsaw01.jpg/w_1290 1290w, https://33333.cdn.cke-cs.com/0fNqCUeBSal4ENvGfd7K/images/c12cb88e596270d8d963b7c87bef1767880f42d94fb2ec43_warsaw01.jpg/w_1720 1720w, https://33333.cdn.cke-cs.com/0fNqCUeBSal4ENvGfd7K/images/c12cb88e596270d8d963b7c87bef1767880f42d94fb2ec43_warsaw01.jpg/w_2150 2150w, https://33333.cdn.cke-cs.com/0fNqCUeBSal4ENvGfd7K/images/c12cb88e596270d8d963b7c87bef1767880f42d94fb2ec43_warsaw01.jpg/w_2580 2580w, https://33333.cdn.cke-cs.com/0fNqCUeBSal4ENvGfd7K/images/c12cb88e596270d8d963b7c87bef1767880f42d94fb2ec43_warsaw01.jpg/w_3010 3010w, https://33333.cdn.cke-cs.com/0fNqCUeBSal4ENvGfd7K/images/c12cb88e596270d8d963b7c87bef1767880f42d94fb2ec43_warsaw01.jpg/w_3440 3440w, https://33333.cdn.cke-cs.com/0fNqCUeBSal4ENvGfd7K/images/c12cb88e596270d8d963b7c87bef1767880f42d94fb2ec43_warsaw01.jpg/w_3870 3870w, https://33333.cdn.cke-cs.com/0fNqCUeBSal4ENvGfd7K/images/c12cb88e596270d8d963b7c87bef1767880f42d94fb2ec43_warsaw01.jpg/w_4288 4288w" sizes="100vw" src="https://33333.cdn.cke-cs.com/0fNqCUeBSal4ENvGfd7K/images/c12cb88e596270d8d963b7c87bef1767880f42d94fb2ec43_warsaw01.jpg">
+	</figure>
+
+	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat. Vestibulum id telluset mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non lobortisleo interdum. </p>
+</div>
+
+<h2 class="header">Standalone buttons</h2>
+
+<div id="editor2">
 	<h2>Responsive image (width style: not set, width attribute present on the image)</h2>
 	<h2>Responsive image (width style: not set, width attribute present on the image)</h2>
 
 
 	<figure class="image">
 	<figure class="image">

+ 92 - 6
packages/ckeditor5-image/tests/manual/imageresizeui.js

@@ -25,16 +25,22 @@ const commonConfig = {
 	toolbar: [ 'heading', '|', 'bold', 'italic', 'link',
 	toolbar: [ 'heading', '|', 'bold', 'italic', 'link',
 		'bulletedList', 'numberedList', 'blockQuote', 'insertTable', 'undo', 'redo', 'outdent', 'indent' ],
 		'bulletedList', 'numberedList', 'blockQuote', 'insertTable', 'undo', 'redo', 'outdent', 'indent' ],
 	image: {
 	image: {
-		imageResize: [
+		resizeUnit: '%',
+		imageResizeOptions: [
+			{
+				name: 'imageResize:original',
+				label: 'Original size',
+				value: null
+			},
 			{
 			{
 				name: 'imageResize:50',
 				name: 'imageResize:50',
-				label: 'Resize image of 50%',
-				value: '50%'
+				label: '50%',
+				value: '50'
 			},
 			},
 			{
 			{
 				name: 'imageResize:75',
 				name: 'imageResize:75',
-				label: 'Resize image of 75%',
-				value: '75%'
+				label: '75%',
+				value: '75'
 			}
 			}
 		],
 		],
 		toolbar: [ 'imageStyle:alignLeft', 'imageStyle:full', 'imageStyle:side', '|', 'imageResize' ],
 		toolbar: [ 'imageStyle:alignLeft', 'imageStyle:full', 'imageStyle:side', '|', 'imageResize' ],
@@ -51,8 +57,88 @@ const commonConfig = {
 	cloudServices: CS_CONFIG
 	cloudServices: CS_CONFIG
 };
 };
 
 
+const imageConfig1 = {
+	resizeUnit: '%',
+	imageResizeOptions: [
+		{
+			name: 'imageResize:original',
+			label: 'Original size',
+			value: null
+		},
+		{
+			name: 'imageResize:50',
+			label: '50%',
+			value: '50'
+		},
+		{
+			name: 'imageResize:75',
+			label: '75%',
+			value: '75'
+		}
+	],
+	toolbar: [ 'imageStyle:alignLeft', 'imageStyle:full', 'imageStyle:side', '|', 'imageResize' ],
+	styles: [
+		'full',
+		'alignLeft',
+		'side' // Purposely using side image instead right aligned image to make sure it works well with both style types.
+	]
+};
+
+const config1 = {
+	...commonConfig,
+	image: imageConfig1
+};
+
+ClassicEditor
+	.create( document.querySelector( '#editor1' ), config1 )
+	.then( editor => {
+		window.editor = editor;
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );
+
+const imageConfig2 = {
+	resizeUnit: '%',
+	imageResizeOptions: [
+		{
+			name: 'imageResize:original',
+			label: 'Original size',
+			value: null
+		},
+		{
+			name: 'imageResize:50',
+			label: '50%',
+			value: '50'
+		},
+		{
+			name: 'imageResize:75',
+			label: '75%',
+			value: '75'
+		}
+	],
+	toolbar: [
+		'imageStyle:alignLeft',
+		'imageStyle:full',
+		'imageStyle:side', '|',
+		'imageResize:original',
+		'imageResize:50',
+		'imageResize:75'
+	],
+	styles: [
+		'full',
+		'alignLeft',
+		'side' // Purposely using side image instead right aligned image to make sure it works well with both style types.
+	]
+};
+
+const config2 = {
+	...commonConfig,
+	image: imageConfig2
+};
+
 ClassicEditor
 ClassicEditor
-	.create( document.querySelector( '#editor' ), commonConfig )
+	.create( document.querySelector( '#editor2' ), config2 )
 	.then( editor => {
 	.then( editor => {
 		window.editor = editor;
 		window.editor = editor;
 	} )
 	} )

+ 5 - 1
packages/ckeditor5-image/tests/manual/imageresizeui.md

@@ -1 +1,5 @@
-## TODO
+## Image Resize UI
+
+The test for manual image resizing.
+- First test has implemented a dropdown with the configured options in the image toolbar (using `imageResize`).
+- Second has standalone buttons (using `imageResize:option`).