|
|
@@ -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
|
|
|
+ */
|