| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142 |
- /**
- * @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/imageresizeediting
- */
- import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
- import WidgetResize from '@ckeditor/ckeditor5-widget/src/widgetresize';
- import ImageResizeCommand from './imageresizecommand';
- /**
- * The image resize feature.
- *
- * It adds a possibility to resize each image using handles or manually by
- * {@link module:image/imageresize/imageresizeui~ImageResizeUI} buttons.
- *
- * @extends module:core/plugin~Plugin
- */
- export default class ImageResizeEditing extends Plugin {
- /**
- * @inheritDoc
- */
- static get requires() {
- return [ WidgetResize ];
- }
- /**
- * @inheritDoc
- */
- static get pluginName() {
- return 'ImageResizeEditing';
- }
- /**
- * @inheritDoc
- */
- init() {
- const editor = this.editor;
- const command = new ImageResizeCommand( editor );
- this._registerSchema();
- this._registerConverters();
- editor.commands.add( 'imageResize', command );
- editor.editing.downcastDispatcher.on( 'insert:image', ( evt, data, conversionApi ) => {
- const widget = conversionApi.mapper.toViewElement( data.item );
- const resizer = editor.plugins
- .get( WidgetResize )
- .attachTo( {
- unit: editor.config.get( 'image.resizeUnit' ) || '%',
- modelElement: data.item,
- viewElement: widget,
- editor,
- getHandleHost( domWidgetElement ) {
- return domWidgetElement.querySelector( 'img' );
- },
- getResizeHost( domWidgetElement ) {
- return domWidgetElement;
- },
- // TODO consider other positions.
- isCentered() {
- const imageStyle = data.item.getAttribute( 'imageStyle' );
- return !imageStyle || imageStyle == 'full' || imageStyle == 'alignCenter';
- },
- onCommit( newValue ) {
- editor.execute( 'imageResize', { width: newValue } );
- }
- } );
- resizer.on( 'updateSize', () => {
- if ( !widget.hasClass( 'image_resized' ) ) {
- editor.editing.view.change( writer => {
- writer.addClass( 'image_resized', widget );
- } );
- }
- } );
- resizer.bind( 'isEnabled' ).to( command );
- }, { priority: 'low' } );
- }
- /**
- * @private
- */
- _registerSchema() {
- this.editor.model.schema.extend( 'image', {
- allowAttributes: 'width'
- } );
- }
- /**
- * Registers image resize converters.
- *
- * @private
- */
- _registerConverters() {
- const editor = this.editor;
- // Dedicated converter to propagate image's attribute to the img tag.
- editor.conversion.for( 'downcast' ).add( dispatcher =>
- dispatcher.on( 'attribute:width:image', ( evt, data, conversionApi ) => {
- if ( !conversionApi.consumable.consume( data.item, evt.name ) ) {
- return;
- }
- const viewWriter = conversionApi.writer;
- const figure = conversionApi.mapper.toViewElement( data.item );
- if ( data.attributeNewValue !== null ) {
- viewWriter.setStyle( 'width', data.attributeNewValue, figure );
- viewWriter.addClass( 'image_resized', figure );
- } else {
- viewWriter.removeStyle( 'width', figure );
- viewWriter.removeClass( 'image_resized', figure );
- }
- } )
- );
- editor.conversion.for( 'upcast' )
- .attributeToAttribute( {
- view: {
- name: 'figure',
- styles: {
- width: /.+/
- }
- },
- model: {
- key: 'width',
- value: viewElement => viewElement.getStyle( 'width' )
- }
- } );
- }
- }
|