Menu

Image resize

This plugin allows to resize the image width and height.

Download

Click on the image to see the resizer on the right side.

Code

<!DOCTYPE html>
<html>
    <head>
        <title>Redactor</title>
        <meta charset="utf-8">

        <!-- css -->
        <link rel="stylesheet" href="/your-folder/redactorx.css" />
    </head>
    <body>
        <!-- element -->
        <textarea id="entry">...</textarea>

        <!-- js -->
        <script src="/your-folder/redactorx.js"></script>
        <script src="/your-folder/plugins/imageresize.js"></script>

        <!-- call -->
        <script>
        RedactorX('#entry', {
            plugins: ['imageresize']
        });
        </script>
    </body>
</html>

Usage

The image resize plugin has three events:

image.resize.start

Occurs whenever the resizing starts.

RedactorX('#entry', {
    plugins: ['imageresize'],
    subscribe: {
        'image.resize.start': function(event) {
            var e = event.get('e');
            var $image = event.get('image');
            var $block = event.get('block');
        }
    }
});

image.resize.move

Occurs during the resizing of the image.

RedactorX('#entry', {
    plugins: ['imageresize'],
    subscribe: {
        'image.resize.move': function(event) {
            var e = event.get('e');
            var $image = event.get('image');
            var $block = event.get('block');
        }
    }
});

image.resize.stop

Occurs whenever the resizing ends.

RedactorX('#entry', {
    plugins: ['imageresize'],
    subscribe: {
        'image.resize.stop': function(event) {
            var e = event.get('e');
            var $image = event.get('image');
            var $block = event.get('block');
        }
    }
});