https://www.smc.edu.tw/src/ckeditor5/plugins/classicimageresize/classicimageresizecommand.js

1import { Command } from 'ckeditor5';
2
3/**
4 * The image resize command. Currently, it supports both the width and the height attributes.
5 *
6 * @extends module:core/command~Command
7 */
8export default class ClassicImageResizeCommand extends Command {
9
10    constructor( editor ) {
11        super( editor );
12        this.editor = editor;
13        this.set('isLockedAspectRatio', undefined);
14
15        this.value = null;
16        this.isLockedAspectRatio = false;
17    }
18
19    init() {
20        this.refresh();
21    }
22
23    /**
24     * @inheritDoc
25     */
26    refresh() {
27        const imageUtils = this.editor.plugins.get('ImageUtils');
28        const element = this.editor.model.document.selection.getSelectedElement();
29        this.isEnabled = imageUtils.isImage( element );
30
31        let height = this.getHeight( element );
32        let width = this.getWidth( element );
33
34        if (width || height) {
35            this.value = {
36                'width': width,
37                'height': height
38            };
39        } else {
40            this.value = null;
41        }
42
43        this.isLockedAspectRatio = this.getIsLockedAspectRatio(element);
44    }
45
46    getHeight(element) {
47        let height = null;
48        if ( element && element.hasAttribute( 'height' ) ) {
49            height = element.getAttribute( 'height' );
50        }
51
52        return height;
53    }
54
55    getWidth(element) {
56        let width = null;
57        if ( element && element.hasAttribute( 'width' ) ) {
58            width = element.getAttribute( 'width' );
59        }
60
61        return width;
62    }
63
64    getIsLockedAspectRatio(element) {
65        let isLockedAspectRatio = null;
66        if ( element && element.hasAttribute( 'isLockedAspectRatio' ) ) {
67            isLockedAspectRatio = element.getAttribute( 'isLockedAspectRatio' );
68        }
69
70        return isLockedAspectRatio;
71    }
72
73    /**
74     * Executes the command.
75     * @param {Object} options
76     * @param {String|null} options.width The new width of the image.
77     * @param {String|null} options.height The new height of the image.
78     * @fires execute
79     */
80    execute( options ) {
81        const model = this.editor.model;
82        const imageElement = model.document.selection.getSelectedElement();
83        if (options.lockAspectRatio !== undefined) {
84            this.isLockedAspectRatio = options.lockAspectRatio;
85        }
86
87        model.change(writer => {
88            if (options.width) {
89                const widthMatch = options.width.match(/^(\d+)(px|%)?$/);
90                if (widthMatch) {
91                    const [, value, unit] = widthMatch;
92                    if (!unit) {
93                        writer.setAttribute('width', value, imageElement);
94                    } else {
95                        writer.setAttribute('width', value + unit, imageElement);
96                    }
97                }
98            }
99            if (this.isLockedAspectRatio) {
100                writer.setAttribute('height', null, imageElement);
101            }
102    
103            if (!this.isLockedAspectRatio && options.height) {
104                const heightMatch = options.height.match(/^(\d+)(px|%)?$/);
105                if (heightMatch) {
106                    const [, value, unit] = heightMatch;
107                    if (!unit) {
108                        writer.setAttribute('height', value, imageElement);
109                    } else {
110                        writer.setAttribute('height', value + unit, imageElement);
111                    }
112                }
113            }
114
115    
116            writer.setAttribute('isLockedAspectRatio', this.isLockedAspectRatio, imageElement);
117        });
118    
119        this.refresh();
120    }
121}