imageresize.js 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156
  1. /**
  2. * @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  4. */
  5. /**
  6. * @module image/imageresize
  7. */
  8. import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
  9. import ImageResizeUI from './imageresize/imageresizeui';
  10. import ImageResizeEditing from './imageresize/imageresizeediting';
  11. import '../theme/imageresize.css';
  12. /**
  13. * The image resize plugin.
  14. *
  15. * It adds a possibility to resize each image using handles.
  16. *
  17. * @extends module:core/plugin~Plugin
  18. */
  19. export default class ImageResize extends Plugin {
  20. /**
  21. * @inheritDoc
  22. */
  23. static get requires() {
  24. return [ ImageResizeEditing, ImageResizeUI ];
  25. }
  26. /**
  27. * @inheritDoc
  28. */
  29. static get pluginName() {
  30. return 'ImageResize';
  31. }
  32. }
  33. /**
  34. * The available options are `'px'` or `'%'`.
  35. *
  36. * Determines the size unit applied to the resized image.
  37. *
  38. * ClassicEditor
  39. * .create( editorElement, {
  40. * image: {
  41. * resizeUnit: 'px'
  42. * }
  43. * } )
  44. * .then( ... )
  45. * .catch( ... );
  46. *
  47. *
  48. * This option is used by the {@link module:image/imageresize~ImageResize} feature.
  49. *
  50. * @default '%'
  51. * @member {String} module:image/image~ImageConfig#resizeUnit
  52. */
  53. /**
  54. * The resize options.
  55. *
  56. * Each option should have its `name`, which is a component name definition that will be
  57. * used in the {@link module:image/imageresize/imageresizeui~ImageResizeUI} plugin.
  58. * Other properties like `label` and `value` define the following:
  59. * a text label for the option button and the value that will be applied to the image's width.
  60. *
  61. * The value property is combined with the `resizeUnit` (`%` by default), eg: `value: '50'` and `resizeUnit: '%'` is `50%`.
  62. *
  63. * **NOTE:** If you want to set an option that will reset image to its original size, you need to pass a `null` value
  64. * to one of the options. The `:original` token is not mandatory, you can call it anything you wish, but it must reflect
  65. * in the standalone buttons configuration for the image toolbar.
  66. *
  67. * ClassicEditor
  68. * .create( editorElement, {
  69. * image: {
  70. * resizeUnit: "%",
  71. * resizeOptions: [ {
  72. * name: 'imageResize:original',
  73. * label: 'Original size',
  74. * value: null
  75. * },
  76. * {
  77. * name: 'imageResize:50',
  78. * label: '50%',
  79. * value: '50'
  80. * },
  81. * {
  82. * name: 'imageResize:75',
  83. * label: '75%',
  84. * value: '75'
  85. * } ]
  86. * }
  87. * } )
  88. * .then( ... )
  89. * .catch( ... );
  90. *
  91. * With resize options defined, you can decide whether you want to display them as a dropdown or as standalone buttons.
  92. * For the dropdown, you need to pass only the `imageResize` token to the `image.toolbar`.
  93. * The dropdown contains all defined options by default:
  94. *
  95. * ClassicEditor
  96. * .create( editorElement, {
  97. * image: {
  98. * resizeUnit: "%",
  99. * resizeOptions: [ {
  100. * name: 'imageResize:original',
  101. * label: 'Original size',
  102. * value: null
  103. * },
  104. * {
  105. * name: 'imageResize:50',
  106. * label: '50%',
  107. * value: '50'
  108. * },
  109. * {
  110. * name: 'imageResize:75',
  111. * label: '75%',
  112. * value: '75'
  113. * } ],
  114. * toolbar: [ 'imageResize', ... ],
  115. * }
  116. * } )
  117. * .then( ... )
  118. * .catch( ... );
  119. *
  120. * If you want to have separate buttons for each option, pass their names instead:
  121. *
  122. * ClassicEditor
  123. * .create( editorElement, {
  124. * image: {
  125. * resizeUnit: "%",
  126. * resizeOptions: [ {
  127. * name: 'imageResize:original',
  128. * label: 'Original size',
  129. * value: null
  130. * },
  131. * {
  132. * name: 'imageResize:50',
  133. * label: '50%',
  134. * value: '50'
  135. * },
  136. * {
  137. * name: 'imageResize:75',
  138. * label: '75%',
  139. * value: '75'
  140. * } ],
  141. * toolbar: [ 'imageResize:original', 'imageResize:50', 'imageResize:75', ... ],
  142. * }
  143. * } )
  144. * .then( ... )
  145. * .catch( ... );
  146. *
  147. *
  148. * @member {Array.<module:image/imageresize/imageresizeui~ImageResizeOption>} module:image/image~ImageConfig#resizeOptions
  149. */