quill-v2-image-resize-module v3.0.3

Installation

To install the package, run the following command:

npm install quill-v2-image-resize-module

Angular with SSR

First install quill and ngx-quill packages then install this package.

In your component.html:

<div #editor></div>

In your component.ts:

    constructor(@Inject(PLATFORM_ID) private platformId: Object) {
        if (isPlatformBrowser(this.platformId)) {
          this.initializeEditor();
        }
    }

    @ViewChild('editor') editor!: ElementRef;
    editorQuill: any;

    async initializeEditor() {
        const Quill = (await import('quill')).default;
        (window as any).Quill = Quill;
        const ImageResize = (await import('quill-v2-image-resize-module')).default;
        Quill.register('modules/imgResize', ImageResize);
        this.editorQuill = new Quill(this.editor.nativeElement, {
        modules: this.editorModules,
        theme: 'snow',
        placeholder: 'type here...',
        });
    }

In your project's package.json add quill css and script:

	"styles": ["src/styles.scss", "node_modules/quill/dist/quill.snow.css", "node_modules/quill/dist/quill.core.css"],
	"scripts": ["node_modules/quill/dist/quill.core.js"],

Webpack/ES6

import Quill from "quill";
import { ImageResize } from "quill-image-resize-module";

Quill.register("modules/imgResize", ImageResize);

const quill = new Quill(editor, {
	// ...
	modules: {
		// ...
		imgResize: {
			// See optional "config" below
		},
	},
});

Script Tag

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

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

var quill = new Quill(editor, {
	// ...
	modules: {
		// ...
		imgResize: {
			// See optional "config" below
		},
	},
});

Config

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

var quill = new Quill(editor, {
	// ...
	modules: {
		// ...
		imgResize: {},
	},
});

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

const quill = new Quill(editor, {
	// ...
	modules: {
		// ...
		imgResize: {
			modules: ["Resize", "DisplaySize", "Toolbar"],
		},
	},
});

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:

var quill = new Quill(editor, {
	// ...
	modules: {
		// ...
		ImageResize: {
			// ...
			handleStyles: {
				backgroundColor: "black",
				border: "none",
				color: white,
				// other camelCase styles for size display
			},
		},
	},
});

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:

var quill = new Quill(editor, {
	// ...
	modules: {
		// ...
		imgResize: {
			// ...
			displayStyles: {
				backgroundColor: "black",
				border: "none",
				color: white,
				// other camelCase styles for size display
			},
		},
	},
});

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:

var quill = new Quill(editor, {
	// ...
	modules: {
		// ...
		imgResize: {
			// ...
			toolbarStyles: {
				backgroundColor: "black",
				border: "none",
				color: white,
				// other camelCase styles for size display
			},
			toolbarButtonStyles: {
				// ...
			},
			toolbarButtonSvgStyles: {
				// ...
			},
		},
	},
});

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,

import { Resize, BaseModule } from "quill-image-resize-module";

class MyModule extends BaseModule {
	// See src/modules/BaseModule.js for documentation on the various lifecycle callbacks
}

var quill = new Quill(editor, {
	// ...
	modules: {
		// ...
		imgResize: {
			modules: [MyModule, Resize],
			// ...
		},
	},
});