ImageResize plugin

Go back to Built-in plugins

ImageResize plugin provides the resizing functionality of an inline image. With this plugin user can resize an inline image by drag and drop the resizing handles of an inline image.

Create plugin instance

ImageResize is an optional plugin. To use this plugin, you need to manually create instance of this plugin and add it to your editor by createEditor() API or constructor of Editor class. To manually create an instance of this plugin, you can use its constructor:

constructor(
    private minWidth: number = 10,
    private minHeight: number = 10,
    private selectionBorderColor: string = '#DB626C',
    private forcePreserveRatio: boolean = false
);

Parameters

minWidth

Minimum widht of the image during resize. Default value is 10px.

minHeight

Minimum height of the image during resize. Default value is 10px.

selectionBorderColor

Color of the resizing border and resizing handle. Default value is '#DB626C'.

forcePreserveRatio

Whether we want to force the inline image preserve its wdith/height ratio during resizing. Default value is false.

Event

When finish resizing, this plugin will trigger a ContentChangedEvent with source equal to 'ImageResize` (ChangeSource.ImageResize).

For more inforation about ContentChangedEvent, please reference to ContentChangedEvent

More info

Package: roosterjs-plugin-image-resize

Support from: Support ImageResizePlugin from 6.4.1, renamed to ImageResize in 6.8.0

Source code: ImageResize.ts