imageresizecommand.js 1.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758
  1. /**
  2. * @license Copyright (c) 2003-2019, 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/imagestyle/imageresize
  7. */
  8. import Command from '@ckeditor/ckeditor5-core/src/command';
  9. import { isImage } from '../image/utils';
  10. /**
  11. * The image resize command. Currently, it supports only the width attribute.
  12. *
  13. * @extends module:core/command~Command
  14. */
  15. export default class ImageResize extends Command {
  16. /**
  17. * @inheritDoc
  18. */
  19. refresh() {
  20. const element = this.editor.model.document.selection.getSelectedElement();
  21. this.isEnabled = isImage( element );
  22. if ( !element || !element.hasAttribute( 'width' ) ) {
  23. this.value = null;
  24. } else {
  25. this.value = {
  26. width: element.getAttribute( 'width' ),
  27. height: null
  28. };
  29. }
  30. }
  31. /**
  32. * Executes the command.
  33. *
  34. * // Sets the width to 50%:
  35. * editor.execute( 'imageResize', { width: '50%' } );
  36. *
  37. * // Removes the width attribute:
  38. * editor.execute( 'imageResize', { width: null } );
  39. *
  40. * @param {Object} options
  41. * @param {String|null} options.width The new width of the image.
  42. * @fires execute
  43. */
  44. execute( options ) {
  45. const model = this.editor.model;
  46. const imageElement = model.document.selection.getSelectedElement();
  47. model.change( writer => {
  48. writer.setAttribute( 'width', options.width, imageElement );
  49. } );
  50. }
  51. }