Quill ImageResize Module

A module for Quill rich text editor to allow images to be resized.

Also see quill-image-drop-module, a module that enables copy-paste and drag/drop for Quill.

Demo

Plunker

Usage

Webpack/ES6

1import Quill from 'quill';
2import { ImageResize } from 'quill-image-resize-module';
3
4Quill.register('modules/imageResize', ImageResize);
5
6const quill = new Quill(editor, {
7    // ...
8    modules: {
9        // ...
10        imageResize: {
11            parchment: Quill.import('parchment')
12            // See optional "config" below
13        }
14    }
15});

Script Tag

Copy image-resize.min.js into your web root or include from node_modules

1<script src="/node_modules/quill-image-resize-module/image-resize.min.js"></script>

1var quill = new Quill(editor, {
2    // ...
3    modules: {
4        // ...
5        ImageResize: {
6            // See optional "config" below
7        }
8    }
9});

Config

For the default experience, pass an object with parchment, like so:

1var quill = new Quill(editor, {
2    // ...
3    modules: {
4        // ...
5        ImageResize: {
6            parchment: Quill.import('parchment')
7        }
8    }
9});

Functionality is broken down into modules, which can be mixed and matched as you like. For example, the default is to include all modules:

1const quill = new Quill(editor, {
2    // ...
3    modules: {
4        // ...
5        ImageResize: {
6            modules: [ 'Resize', 'DisplaySize', 'Toolbar' ]
7        }
8    }
9});

Each module is described below.

Resize - Resize the image

Adds handles to the image's corners which can be dragged with the mouse to resize the image.

The look and feel can be controlled with options:

1var quill = new Quill(editor, {
2    // ...
3    modules: {
4        // ...
5        ImageResize: {
6            // ...
7            handleStyles: {
8                backgroundColor: 'black',
9                border: 'none',
10                color: white
11                // other camelCase styles for size display
12            }
13        }
14    }
15});

DisplaySize - Display pixel size

Shows the size of the image in pixels near the bottom right of the image.

The look and feel can be controlled with options:

1var quill = new Quill(editor, {
2    // ...
3    modules: {
4        // ...
5        ImageResize: {
6            // ...
7            displayStyles: {
8                backgroundColor: 'black',
9                border: 'none',
10                color: white
11                // other camelCase styles for size display
12            }
13        }
14    }
15});

Toolbar - Image alignment tools

Displays a toolbar below the image, where the user can select an alignment for the image.

The look and feel can be controlled with options:

1var quill = new Quill(editor, {
2    // ...
3    modules: {
4        // ...
5        ImageResize: {
6            // ...
7            toolbarStyles: {
8                backgroundColor: 'black',
9                border: 'none',
10                color: white
11                // other camelCase styles for size display
12            },
13            toolbarButtonStyles: {
14                // ...
15            },
16            toolbarButtonSvgStyles: {
17                // ...
18            },
19        }
20    }
21});

BaseModule - Include your own custom module

You can write your own module by extending the BaseModule class, and then including it in the module setup.

For example,

1import { Resize, BaseModule } from 'quill-image-resize-module';
2
3class MyModule extends BaseModule {
4    // See src/modules/BaseModule.js for documentation on the various lifecycle callbacks
5}
6
7var quill = new Quill(editor, {
8    // ...
9    modules: {
10        // ...
11        ImageResize: {
12            modules: [ MyModule, Resize ],
13            // ...
14        }
15    }
16});