| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228 |
- /**
- * @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 ImageResizeButtons from './imageresize/imageresizebuttons';
- import ImageResizeEditing from './imageresize/imageresizeediting';
- import ImageResizeHandles from './imageresize/imageresizehandles';
- 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, ImageResizeHandles, ImageResizeButtons ];
- }
- /**
- * @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 image resize options.
- *
- * Each option should have at least these two properties:
- *
- * * name: The name of the UI component registered in the global
- * {@link module:core/editor/editorui~EditorUI#componentFactory component factory} of the editor,
- * representing the button a user can click to change the size of an image,
- * * value: An actual image width applied when a user clicks the mentioned button
- * ({@link module:image/imageresize/imageresizecommand~ImageResizeCommand} gets executed).
- * The value property is combined with the {@link module:image/image~ImageConfig#resizeUnit `config.image.resizeUnit`} (`%` by default).
- * For instance: `value: '50'` and `resizeUnit: '%'` will render as `'50%'` in the UI.
- *
- * **Resetting the image size**
- *
- * If you want to set an option that will reset image to its original size, you need to pass a `null` value
- * to one of the options. The `:original` token is not mandatory, you can call it anything you wish, but it must reflect
- * in the standalone buttons configuration for the image toolbar.
- *
- * ClassicEditor
- * .create( editorElement, {
- * image: {
- * resizeUnit: "%",
- * resizeOptions: [ {
- * name: 'imageResize:original',
- * value: null
- * },
- * {
- * name: 'imageResize:50',
- * value: '50'
- * },
- * {
- * name: 'imageResize:75',
- * value: '75'
- * } ]
- * }
- * } )
- * .then( ... )
- * .catch( ... );
- *
- * **Resizing images using a dropdown**
- *
- * 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
- {@link module:image/image~ImageConfig#toolbar `config.image.toolbar`}. The dropdown contains all defined options by default:
- *
- * ClassicEditor
- * .create( editorElement, {
- * image: {
- * resizeUnit: "%",
- * resizeOptions: [ {
- * name: 'imageResize:original',
- * value: null
- * },
- * {
- * name: 'imageResize:50',
- * value: '50'
- * },
- * {
- * name: 'imageResize:75',
- * value: '75'
- * } ],
- * toolbar: [ 'imageResize', ... ],
- * }
- * } )
- * .then( ... )
- * .catch( ... );
- *
- * **Resizing images using individual buttons**
- *
- * If you want to have separate buttons for {@link module:image/imageresize/imageresizebuttons~ImageResizeOption each option},
- * pass their names to the {@link module:image/image~ImageConfig#toolbar `config.image.toolbar`} instead. Please keep in mind
- * that this time **you must define the additional
- * {@link module:image/imageresize/imageresizebuttons~ImageResizeOption `icon` property}**:
- *
- * ClassicEditor
- * .create( editorElement, {
- * image: {
- * resizeUnit: "%",
- * resizeOptions: [ {
- * name: 'imageResize:original',
- * value: null,
- * icon: 'original'
- * },
- * {
- * name: 'imageResize:25',
- * value: '25',
- * icon: 'small'
- * },
- * {
- * name: 'imageResize:50',
- * value: '50',
- * icon: 'medium'
- * },
- * {
- * name: 'imageResize:75',
- * value: '75',
- * icon: 'large'
- * } ],
- * toolbar: [ 'imageResize:25', 'imageResize:50', 'imageResize:75', 'imageResize:original', ... ],
- * }
- * } )
- * .then( ... )
- * .catch( ... );
- *
- * **Customizing resize button labels**
- *
- * You can set your own label for each resize button. To do that, add the `label` property like in the example below.
- *
- * * When using the **dropdown**, the labels are displayed on the list of all options when you open the dropdown.
- * * When using **standalone buttons**, the labels will are displayed as tooltips when a user hovers over the button.
- *
- * ClassicEditor
- * .create( editorElement, {
- * image: {
- * resizeUnit: "%",
- * resizeOptions: [ {
- * name: 'imageResize:original',
- * value: null,
- * label: 'Original size'
- * // Note: add the "icon" property if you're configuring a standalone button.
- * },
- * {
- * name: 'imageResize:50',
- * value: '50',
- * label: 'Medium size'
- * // Note: add the "icon" property if you're configuring a standalone button.
- * },
- * {
- * name: 'imageResize:75',
- * value: '75',
- * label: 'Large size'
- * // Note: add the "icon" property if you're configuring a standalone button.
- * } ]
- * }
- * } )
- * .then( ... )
- * .catch( ... );
- *
- * **Default value**
- *
- * The following configuration is used by default:
- *
- * resizeOptions = [
- * {
- * name: 'imageResize:original',
- * value: null,
- * icon: 'original'
- * },
- * {
- * name: 'imageResize:25',
- * value: '25',
- * icon: 'small'
- * },
- * {
- * name: 'imageResize:50',
- * value: '50',
- * icon: 'medium'
- * },
- * {
- * name: 'imageResize:75',
- * value: '75',
- * icon: 'large'
- * }
- * ];
- *
- * @member {Array.<module:image/imageresize/imageresizebuttons~ImageResizeOption>} module:image/image~ImageConfig#resizeOptions
- */
|