Преглед на файлове

Internal: Restored initial image formatting, added ImageResize plugin dedicated for the resizing.

Marek Lewandowski преди 6 години
родител
ревизия
185ff3e0fe

+ 2 - 2
packages/ckeditor5-image/src/image.js

@@ -10,8 +10,8 @@
 import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
 import ImageEditing from '../src/image/imageediting';
 import Widget from '@ckeditor/ckeditor5-widget/src/widget';
-import WidgetResizer from '@ckeditor/ckeditor5-widget/src/widgetresizer';
 import ImageTextAlternative from './imagetextalternative';
+import ImageResize from './image/imageresize';
 
 import '../theme/image.css';
 
@@ -35,7 +35,7 @@ export default class Image extends Plugin {
 	 * @inheritDoc
 	 */
 	static get requires() {
-		return [ ImageEditing, Widget, ImageTextAlternative, WidgetResizer ];
+		return [ ImageEditing, Widget, ImageTextAlternative, ImageResize ];
 	}
 
 	/**

+ 1 - 19
packages/ckeditor5-image/src/image/imageediting.js

@@ -59,25 +59,7 @@ export default class ImageEditing extends Plugin {
 
 		conversion.for( 'editingDowncast' ).elementToElement( {
 			model: 'image',
-			view: ( modelElement, viewWriter ) => {
-				const ret = toImageWidget( createImageViewElement( viewWriter ), viewWriter, t( 'image widget' ) );
-
-				editor.plugins.get( 'WidgetResizer' ).apply( ret, viewWriter, {
-					getResizeHost( wrapper ) {
-						return wrapper.querySelector( 'img' );
-					},
-					getAspectRatio( resizeHost ) {
-						return resizeHost.naturalWidth / resizeHost.naturalHeight;
-					},
-					isCentered( context ) {
-						const imageStyle = context._getModel( editor, context.widgetWrapperElement ).getAttribute( 'imageStyle' );
-
-						return !imageStyle || imageStyle == 'full';
-					}
-				} );
-
-				return ret;
-			}
+			view: ( modelElement, viewWriter ) => toImageWidget( createImageViewElement( viewWriter ), viewWriter, t( 'image widget' ) )
 		} );
 
 		conversion.for( 'downcast' )

+ 59 - 0
packages/ckeditor5-image/src/image/imageresize.js

@@ -0,0 +1,59 @@
+/**
+ * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/**
+ * @module image/image/imageresize
+ */
+
+import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
+import WidgetResizer from '@ckeditor/ckeditor5-widget/src/widgetresizer';
+
+/**
+ *	Image resize plugin.
+ *
+ * @extends module:core/plugin~Plugin
+ */
+export default class ImageResize extends Plugin {
+	/**
+	 * @inheritDoc
+	 */
+	static get requires() {
+		return [ WidgetResizer ];
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	static get pluginName() {
+		return 'ImageResize';
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	init() {
+		const editor = this.editor;
+
+		editor.editing.downcastDispatcher.on( 'insert:image', ( evt, data, conversionApi ) => {
+			const widget = conversionApi.mapper.toViewElement( data.item );
+
+			editor.plugins.get( 'WidgetResizer' ).apply( widget, conversionApi.writer, {
+				getResizeHost( wrapper ) {
+					return wrapper.querySelector( 'img' );
+				},
+				getAspectRatio( resizeHost ) {
+					return resizeHost.naturalWidth / resizeHost.naturalHeight;
+				},
+				isCentered( context ) {
+					const imageStyle = context._getModel( editor, context.widgetWrapperElement ).getAttribute( 'imageStyle' );
+
+					return !imageStyle || imageStyle == 'full';
+				}
+			} );
+		}, {
+			priority: 'low'
+		} );
+	}
+}

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

@@ -18,7 +18,7 @@ import {
 	getData
 } from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
 
-describe.only( 'Image resizer', () => {
+describe( 'Image resizer', () => {
 	const FIXTURE_WIDTH = 100;
 	const FIXTURE_HEIGHT = 50;
 	const MOUSE_BUTTON_MAIN = 0; // Id of left mouse button.

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

@@ -1,7 +1,7 @@
 <div id="editor">
 	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat. Vestibulum id tellus et mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non lobortis leo interdum. </p>
 	<figure class="image image-style-side">
-		<img src="sample.jpg" alt="" height="60" />
+		<img src="sample.jpg" alt="" />
 	</figure>
 	<figure class="image">
 		<img src="sample.jpg" alt="" />