| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125 |
- /**
- * @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 ImageResizeCommand from './imageresizecommand';
- /**
- * The image resize editing feature.
- *
- * It adds the ability to resize each image using handles or manually by
- * {@link module:image/imageresize/imageresizebuttons~ImageResizeButtons} buttons.
- *
- * @extends module:core/plugin~Plugin
- */
- export default class ImageResizeEditing extends Plugin {
- /**
- * @inheritDoc
- */
- static get pluginName() {
- return 'ImageResizeEditing';
- }
- /**
- * @inheritDoc
- */
- constructor( editor ) {
- super( editor );
- editor.config.define( 'image', {
- resizeUnit: '%',
- resizeOptions: [ {
- name: 'imageResize:original',
- value: null,
- icon: 'original'
- },
- {
- name: 'imageResize:25',
- value: '25',
- icon: 'small'
- },
- {
- name: 'imageResize:50',
- value: '50',
- icon: 'medium'
- },
- {
- name: 'imageResize:75',
- value: '75',
- icon: 'large'
- } ]
- } );
- }
- /**
- * @inheritDoc
- */
- init() {
- const editor = this.editor;
- const command = new ImageResizeCommand( editor );
- this._registerSchema();
- this._registerConverters();
- editor.commands.add( 'imageResize', command );
- }
- /**
- * @private
- */
- _registerSchema() {
- this.editor.model.schema.extend( 'image', { allowAttributes: 'width' } );
- this.editor.model.schema.setAttributeProperties( 'width', {
- isFormatting: true
- } );
- }
- /**
- * 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' )
- }
- } );
- }
- }
|