| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156 |
- /**
- * @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/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/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%`.
- *
- * **NOTE:** 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',
- * 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 {Array.<module:image/imageresize/imageresizeui~ImageResizeOption>} module:image/image~ImageConfig#resizeOptions
- */
|