Image Resize

Adds a drag handle on focused image blocks for resizing by width (height follows aspect ratio). No toolbar button — select an image block and drag the blue handle on the right edge.

Works automatically when an image block is focused. Minimum dimensions are controlled by plugin options.

Load the bundle

<script src="/assets/redactor/redactor.js"></script>
<script src="/assets/redactor/plugins/image-resize/image-resize.js"></script>

Initialization

const app = Redactor('#entry', {
    plugins: ['imageResize']
});

Options

minWidth (number)
- default 80
- Minimum image width in pixels while resizing.
minHeight (number)
- default 10
- Minimum image height in pixels while resizing.

Redactor('#entry', {
    plugins: ['imageResize'],
    imageResize: {
        minWidth: 120,
        minHeight: 20
    }
});

Language strings

en: {
    imageResize: {
        'image-resize': 'Image resize'
    }
}

Events

This plugin emits editor-level image resize events (not namespaced to the plugin instance):

image:resize:start

Resizing begins.

Payload: { event, block, blockEl, imageEl }

image:resize:stop

Resizing ends and dimensions are saved.

Payload: { event, block, blockEl, imageEl }

app.on('image:resize:stop', ({ block }) => {
    console.log('Resized', block.getImageEl()?.getAttribute('width'));
});

API

stop

Removes the resize handle and unbinds resize listeners.

app.imageResize.stop();

updatePosition

Repositions the resize handle after layout changes (for example image wrap or alignment).

app.imageResize.updatePosition();