Quill ImageResize Module

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

This is a clone of https://github.com/kensnyder/quill-image-resize-module

This version has been updated with Typescript types and works with newerst version of Quill 1.3.7

Usage

ES6

import Quill from "quill";
import ImageResize from "quill-image-resizer-plugin";

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

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

Config

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

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

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: {
    // ...
    ImageResize: {
      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: {
    // ...
    ImageResize: {
      // ...
      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: {
    // ...
    ImageResize: {
      // ...
      toolbarStyles: {
        backgroundColor: "black",
        width: "20px",
        height: "20px",
        // 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-resizer-plugin";

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

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