this is a fork in order to allow overriding the alt text prompt text. This fork introduces the altTextPromptText option. We also changed an icon.

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-alt-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-alt-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-alt-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});