Parcourir la source

AdAdd support for percents.

Piotrek Koszuliński il y a 6 ans
Parent
commit
b0172a7d6f

+ 8 - 9
packages/ckeditor5-image/src/imageresize.js

@@ -51,17 +51,17 @@ export default class ImageResize extends Plugin {
 			const resizer = editor.plugins
 				.get( WidgetResize )
 				.attachTo( {
+					unit: editor.config.get( 'image.resizeUnit' ) || '%',
+
 					modelElement: data.item,
 					viewElement: widget,
 					downcastWriter: conversionApi.writer,
-					getResizeHost( domWidgetElement ) {
-						return domWidgetElement.querySelector( 'img' );
-					},
+
 					getHandleHost( domWidgetElement ) {
 						return domWidgetElement.querySelector( 'img' );
 					},
-					getAspectRatio( domResizeHost ) {
-						return domResizeHost.naturalWidth / domResizeHost.naturalHeight;
+					getResizeHost( domWidgetElement ) {
+						return domWidgetElement;
 					},
 					// TODO consider other positions.
 					isCentered() {
@@ -69,10 +69,9 @@ export default class ImageResize extends Plugin {
 
 						return !imageStyle || imageStyle == 'full';
 					},
-					onCommit( resizerState ) {
-						const value = resizerState.proposedWidthPercents ?
-							resizerState.proposedWidthPercents + '%' : resizerState.proposedWidth + 'px';
-						editor.execute( 'imageResize', { width: value } );
+
+					onCommit( newValue ) {
+						editor.execute( 'imageResize', { width: newValue } );
 					}
 				} );
 

+ 4 - 1
packages/ckeditor5-image/tests/imageresize.js

@@ -51,7 +51,10 @@ describe( 'ImageResize', () => {
 
 		return ClassicEditor
 			.create( editorElement, {
-				plugins: [ Image, ImageStyle, Paragraph, Undo, Table, ImageResize ]
+				plugins: [ Image, ImageStyle, Paragraph, Undo, Table, ImageResize ],
+				image: {
+					resizeUnit: 'px'
+				}
 			} )
 			.then( newEditor => {
 				editor = newEditor;

Fichier diff supprimé car celui-ci est trop grand
+ 48 - 27
packages/ckeditor5-image/tests/manual/imageresize.html


+ 10 - 1
packages/ckeditor5-image/tests/manual/imageresize.js

@@ -45,10 +45,19 @@ ClassicEditor
 	} );
 
 ClassicEditor
-	.create( document.querySelector( '#fancyEditor' ), commonConfig )
+	.create( document.querySelector( '#fancy-editor' ), commonConfig )
 	.then( editor => {
 		window.fancyEditor = editor;
 	} )
 	.catch( err => {
 		console.error( err.stack );
 	} );
+
+ClassicEditor
+	.create( document.querySelector( '#editor-other-units' ), commonConfig )
+	.then( editor => {
+		window.editorOtherUnits = editor;
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );

Fichier diff supprimé car celui-ci est trop grand
+ 83 - 0
packages/ckeditor5-image/tests/manual/imageresizepx.html


+ 64 - 0
packages/ckeditor5-image/tests/manual/imageresizepx.js

@@ -0,0 +1,64 @@
+/**
+ * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/* global document, console, window */
+
+import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
+import ArticlePluginSet from '@ckeditor/ckeditor5-core/tests/_utils/articlepluginset';
+import ImageResize from '../../src/imageresize';
+import Indent from '@ckeditor/ckeditor5-indent/src/indent';
+import IndentBlock from '@ckeditor/ckeditor5-indent/src/indentblock';
+import EasyImage from '@ckeditor/ckeditor5-easy-image/src/easyimage';
+
+import { CS_CONFIG } from '@ckeditor/ckeditor5-cloud-services/tests/_utils/cloud-services-config';
+
+const commonConfig = {
+	plugins: [
+		ArticlePluginSet,
+		ImageResize,
+		Indent,
+		IndentBlock,
+		EasyImage
+	],
+	toolbar: [ 'heading', '|', 'bold', 'italic', 'link',
+		'bulletedList', 'numberedList', 'blockQuote', 'insertTable', 'undo', 'redo', 'outdent', 'indent' ],
+	image: {
+		resizeUnit: 'px',
+		toolbar: [ 'imageStyle:alignLeft', 'imageStyle:full', 'imageStyle:side' ],
+		styles: [
+			'full',
+			'alignLeft',
+			'side' // Purposely using side image instead right aligned image to make sure it works well with both style types.
+		]
+	},
+	cloudServices: CS_CONFIG
+};
+
+ClassicEditor
+	.create( document.querySelector( '#editor' ), commonConfig )
+	.then( editor => {
+		window.editor = editor;
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );
+
+ClassicEditor
+	.create( document.querySelector( '#fancy-editor' ), commonConfig )
+	.then( editor => {
+		window.fancyEditor = editor;
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );
+
+ClassicEditor
+	.create( document.querySelector( '#editor-other-units' ), commonConfig )
+	.then( editor => {
+		window.editorOtherUnits = editor;
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );

+ 10 - 0
packages/ckeditor5-image/tests/manual/imageresizepx.md

@@ -0,0 +1,10 @@
+## Image resize
+
+* Image resizer should be visible after focusing the image.
+* There should be four resizers.
+* Resizers should always be bound to image, not the entire image widget.
+
+### Edge cases
+
+* Make sure that the resized image can't be bigger than the editable.
+* Make sure that releasing mouse button outside of an editable stops the resize.