imageresizeediting.js 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125
  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/imageresizeediting
  7. */
  8. import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
  9. import ImageResizeCommand from './imageresizecommand';
  10. /**
  11. * The image resize editing feature.
  12. *
  13. * It adds the ability 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 ImageResizeEditing extends Plugin {
  19. /**
  20. * @inheritDoc
  21. */
  22. static get pluginName() {
  23. return 'ImageResizeEditing';
  24. }
  25. /**
  26. * @inheritDoc
  27. */
  28. constructor( editor ) {
  29. super( editor );
  30. editor.config.define( 'image', {
  31. resizeUnit: '%',
  32. resizeOptions: [ {
  33. name: 'imageResize:original',
  34. value: null,
  35. icon: 'original'
  36. },
  37. {
  38. name: 'imageResize:25',
  39. value: '25',
  40. icon: 'small'
  41. },
  42. {
  43. name: 'imageResize:50',
  44. value: '50',
  45. icon: 'medium'
  46. },
  47. {
  48. name: 'imageResize:75',
  49. value: '75',
  50. icon: 'large'
  51. } ]
  52. } );
  53. }
  54. /**
  55. * @inheritDoc
  56. */
  57. init() {
  58. const editor = this.editor;
  59. const command = new ImageResizeCommand( editor );
  60. this._registerSchema();
  61. this._registerConverters();
  62. editor.commands.add( 'imageResize', command );
  63. }
  64. /**
  65. * @private
  66. */
  67. _registerSchema() {
  68. this.editor.model.schema.extend( 'image', { allowAttributes: 'width' } );
  69. this.editor.model.schema.setAttributeProperties( 'width', {
  70. isFormatting: true
  71. } );
  72. }
  73. /**
  74. * Registers image resize converters.
  75. *
  76. * @private
  77. */
  78. _registerConverters() {
  79. const editor = this.editor;
  80. // Dedicated converter to propagate image's attribute to the img tag.
  81. editor.conversion.for( 'downcast' ).add( dispatcher =>
  82. dispatcher.on( 'attribute:width:image', ( evt, data, conversionApi ) => {
  83. if ( !conversionApi.consumable.consume( data.item, evt.name ) ) {
  84. return;
  85. }
  86. const viewWriter = conversionApi.writer;
  87. const figure = conversionApi.mapper.toViewElement( data.item );
  88. if ( data.attributeNewValue !== null ) {
  89. viewWriter.setStyle( 'width', data.attributeNewValue, figure );
  90. viewWriter.addClass( 'image_resized', figure );
  91. } else {
  92. viewWriter.removeStyle( 'width', figure );
  93. viewWriter.removeClass( 'image_resized', figure );
  94. }
  95. } )
  96. );
  97. editor.conversion.for( 'upcast' )
  98. .attributeToAttribute( {
  99. view: {
  100. name: 'figure',
  101. styles: {
  102. width: /.+/
  103. }
  104. },
  105. model: {
  106. key: 'width',
  107. value: viewElement => viewElement.getStyle( 'width' )
  108. }
  109. } );
  110. }
  111. }