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

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

@@ -0,0 +1,152 @@
+/**
+ * @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/**
+ * @module image/imageresize
+ */
+
+import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
+import ImageResizeUI from './imageresize/ui/imageresizeui';
+import ImageResizeEditing from './imageresize/imageresizeediting';
+
+import '../theme/imageresize.css';
+
+/**
+ * The image resize plugin.
+ *
+ * It adds a possibility to resize each image using handles.
+ *
+ * @extends module:core/plugin~Plugin
+ */
+export default class ImageResize extends Plugin {
+	/**
+	 * @inheritDoc
+	 */
+	static get requires() {
+		return [ ImageResizeEditing, ImageResizeUI ];
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	static get pluginName() {
+		return 'ImageResize';
+	}
+}
+
+/**
+ * The available options are `'px'` or `'%'`.
+ *
+ * Determines the size unit applied to the resized image.
+ *
+ *		ClassicEditor
+ *			.create( editorElement, {
+ *				image: {
+ *					resizeUnit: 'px'
+ *				}
+ *			} )
+ *			.then( ... )
+ *			.catch( ... );
+ *
+ *
+ * This option is used by the {@link module:image/imageresize~ImageResize} feature.
+ *
+ * @default '%'
+ * @member {String} module:image/image~ImageConfig#resizeUnit
+ */
+
+/**
+ * The resize options.
+ *
+ * Each option should have its `name`, which is a component name definition that will be
+ * used in the {@link module:image/imageresize/ui/imageresizeui~ImageResizeUI} plugin.
+ * Other properties like `label` and `value` define the following:
+ * a text label for the option button and the value that will be applied to the image's width.
+ *
+ * The value property is combined with the `resizeUnit` (`%` by default), eg: `value: '50'` and `resizeUnit: '%'` is `50%`.
+ *
+ *		ClassicEditor
+ *			.create( editorElement, {
+ *				image: {
+ *					resizeUnit: "%",
+ *					resizeOptions: [{
+ *						name: 'imageResize:original',
+ *						label: 'Original size',
+ *						value: null
+ *					},
+ *					{
+ *						name: 'imageResize:50',
+ *						label: '50%',
+ *						value: '50'
+ *					},
+ *					{
+ *						name: 'imageResize:75',
+ *						label: '75%',
+ *						value: '75'
+ *					}]
+ *				}
+ *			} )
+ *			.then( ... )
+ *			.catch( ... );
+ *
+ * With resize options defined, you can decide whether you want to display them as a dropdown or as standalone buttons.
+ * For the dropdown, you need to pass only the `imageResize` token to the `image.toolbar`.
+ * The dropdown contains all defined options by default:
+ *
+ *			ClassicEditor
+ *			.create( editorElement, {
+ *				image: {
+ *					resizeUnit: "%",
+ *					resizeOptions: [{
+ *						name: 'imageResize:original',
+ *						label: 'Original size',
+ *						value: null
+ *					},
+ *					{
+ *						name: 'imageResize:50',
+ *						label: '50%',
+ *						value: '50'
+ *					},
+ *					{
+ *						name: 'imageResize:75',
+ *						label: '75%',
+ *						value: '75'
+ *					}],
+ *					toolbar: [ 'imageResize', ... ],
+ *				}
+ *			} )
+ *			.then( ... )
+ *			.catch( ... );
+ *
+ * If you want to have separate buttons for each option, pass their names instead:
+ *
+ *			ClassicEditor
+ *			.create( editorElement, {
+ *				image: {
+ *					resizeUnit: "%",
+ *					resizeOptions: [{
+ *						name: 'imageResize:original',
+ *						label: 'Original size',
+ *						value: null
+ *					},
+ *					{
+ *						name: 'imageResize:50',
+ *						label: '50%',
+ *						value: '50'
+ *					},
+ *					{
+ *						name: 'imageResize:75',
+ *						label: '75%',
+ *						value: '75'
+ *					}],
+ *					toolbar: [ 'imageResize:original', 'imageResize:50', 'imageResize:75', ... ],
+ *				}
+ *			} )
+ *			.then( ... )
+ *			.catch( ... );
+ *
+ *
+ * @member {String} module:image/image~ImageConfig#resizeOptions
+ */

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

@@ -1,58 +0,0 @@
-/**
- * @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
- */
-
-/**
- * @module image/imageresize
- */
-
-import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
-import ImageResizeUI from './ui/imageresizeui';
-import ImageResizeEditing from './imageresizeediting';
-
-import '../../theme/imageresize.css';
-
-/**
- * The image resize plugin.
- *
- * It adds a possibility to resize each image using handles.
- *
- * @extends module:core/plugin~Plugin
- */
-export default class ImageResize extends Plugin {
-	/**
-	 * @inheritDoc
-	 */
-	static get requires() {
-		return [ ImageResizeEditing, ImageResizeUI ];
-	}
-
-	/**
-	 * @inheritDoc
-	 */
-	static get pluginName() {
-		return 'ImageResize';
-	}
-}
-
-/**
- * The available options are `'px'` or `'%'`.
- *
- * Determines the size unit applied to the resized image.
- *
- *		ClassicEditor
- *			.create( editorElement, {
- *				image: {
- *					resizeUnit: 'px'
- *				}
- *			} )
- *			.then( ... )
- *			.catch( ... );
- *
- *
- * This option is used by the {@link module:image/imageresize~ImageResize} feature.
- *
- * @default '%'
- * @member {String} module:image/image~ImageConfig#resizeUnit
- */