8
0

imageresizehandles.js 2.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586
  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/imageresizehandles
  7. */
  8. import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
  9. import WidgetResize from '@ckeditor/ckeditor5-widget/src/widgetresize';
  10. /**
  11. * The image resize by handles feature.
  12. *
  13. * It adds a possibility to resize each image using handles or manually by
  14. * {@link module:image/imageresize/imageresizebuttons~ImageResizeButtons} buttons.
  15. *
  16. * @extends module:core/plugin~Plugin
  17. */
  18. export default class ImageResizeHandles extends Plugin {
  19. /**
  20. * @inheritDoc
  21. */
  22. static get requires() {
  23. return [ WidgetResize ];
  24. }
  25. /**
  26. * @inheritDoc
  27. */
  28. static get pluginName() {
  29. return 'ImageResizeHandles';
  30. }
  31. /**
  32. * @inheritDoc
  33. */
  34. init() {
  35. const editor = this.editor;
  36. const command = editor.commands.get( 'imageResize' );
  37. this.bind( 'isEnabled' ).to( command );
  38. editor.editing.downcastDispatcher.on( 'insert:image', ( evt, data, conversionApi ) => {
  39. const widget = conversionApi.mapper.toViewElement( data.item );
  40. const resizer = editor.plugins
  41. .get( WidgetResize )
  42. .attachTo( {
  43. unit: editor.config.get( 'image.resizeUnit' ) || '%',
  44. modelElement: data.item,
  45. viewElement: widget,
  46. editor,
  47. getHandleHost( domWidgetElement ) {
  48. return domWidgetElement.querySelector( 'img' );
  49. },
  50. getResizeHost( domWidgetElement ) {
  51. return domWidgetElement;
  52. },
  53. // TODO consider other positions.
  54. isCentered() {
  55. const imageStyle = data.item.getAttribute( 'imageStyle' );
  56. return !imageStyle || imageStyle == 'full' || imageStyle == 'alignCenter';
  57. },
  58. onCommit( newValue ) {
  59. editor.execute( 'imageResize', { width: newValue } );
  60. }
  61. } );
  62. resizer.on( 'updateSize', () => {
  63. if ( !widget.hasClass( 'image_resized' ) ) {
  64. editor.editing.view.change( writer => {
  65. writer.addClass( 'image_resized', widget );
  66. } );
  67. }
  68. } );
  69. resizer.bind( 'isEnabled' ).to( this );
  70. }, { priority: 'low' } );
  71. }
  72. }