Quill Resize Module

A module for Quill rich text editor to allow images/iframe/video and custom elements to be resized.

This module is original forked from https://github.com/whatcould/quill-image-resize-module.

Changed V2

1. Support Quill2
2. Removed formats/image formats/placeholder
3. Removed options.styles
4. Add embedTags option for custom embed element
5. Add tools option for custom toolbar

Features

• Image resize

• Embed resize (Default to iframe/video tag)

• Custom any elements resize

• Limit minWidth/maxWidth/minHeight/maxHeight

• Limit Width/Height ratio

• Selected embed element style

• Direction key support

Demo

https://codesandbox.io/p/sandbox/9m9vl8

Usage

Webpack/ES6

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

Script Tag

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

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

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

Config

For the default experience, pass an empty object, like so:

1var quill = new Quill(editor, {
2    // ...
3    modules: {
4        // ...
5        resize: {}
6    }
7});

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        resize: {
6            modules: [ 'Resize', 'DisplaySize', 'Toolbar' ]
7        }
8    }
9});

Customize the toolbar buttons with "tools" option.

For example, add handler for image alt attribute:

1const quill = new Quill(editor, {
2    // ...
3    modules: {
4        // ...
5        resize: {
6            tools: [
7              'left', 'right',
8              {
9                text: 'Alt',
10                verify (activeEle) {
11                    return (activeEle && activeEle.tagName === 'IMG')
12                },
13                handler (evt, button, activeEle) {
14                    let alt = activeEle.alt || ''
15                    alt = window.prompt('Alt for image', alt)
16                    if (alt == null) return
17                    activeEle.setAttribute('alt', alt)
18                }
19              }
20            ]
21        }
22    }
23});

Resize - Resize the element

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

The look and feel can be controlled with options:

1var quill = new Quill(editor, {
2    // ...
3    modules: {
4        // ...
5        resize: {
6            // ...
7            // set parchment key to enable resize module
8            parchment: {
9                image: {
10                    attribute: ['width'],  // ['width', 'height']
11                    limit: {
12                        minWidth: 200,
13                        maxWidth: 600,
14                        minHeight: 200,
15                        maxHeight: 450,
16                        ratio: .5625  // keep width/height ratio. (ratio=height/width)
17                    }
18                }
19            }
20        }
21    }
22});

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 QuillResize from 'quill-resize-module';
2Quill.register('modules/resize', QuillResize);
3
4class MyModule extends QuillResize.Modules.Base {
5    // See src/modules/BaseModule.js for documentation on the various lifecycle callbacks
6}
7
8var quill = new Quill(editor, {
9    // ...
10    modules: {
11        // ...
12        resize: {
13            modules: [ MyModule, QuillResize.Modules.Resize ],
14            // ...
15        }
16    }
17});