Quill ImageResize Module

A module for Quill rich text editor to allow images to be resized. You can use it in Quill2.x or Quill1.3.7

Fork from quill-image-resize-module. This module fix export problem. Your can use import ImageResize from 'quill-image-resize-module-rebuild'; to your project.

Also add a default module MinSize and some options. Fix some display bug.

Demo

quill1.3.7

quill2.0.0

Usage

npm install quill-image-resize-module-rebuild

import Quill from 'quill';
import ImageResize from 'quill-image-resize-module-rebuild';

const quill = new Quill(editor, {
  // ...
  modules: {
    // ...
    ImageResize: {
      modules: ['Resize', 'Toolbar', 'MinSize', 'DisplaySize'], // default
      // ...
    },
  },
});

If you want to pass the modules by youself. Please make sure Resize after MinSize, DisplaySize after Resize and MinSize. Otherwise, maybe have some wrong in display

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 handleStyles

New option

When freeAspectRatio is true, the image is not limited by the original image scale.

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

New default module

MinSize - The image min size

This module can handle the Resize module to change the size of the image, ensuring that the size is not less than option minSize

minSize option can be a number or an array of width and height. When freeAspectRatio is false, the min size will be calculated based on origin image aspect ratio and width of minSize

const quill = new Quill(editor, {
  // ...
  modules: {
    // ...
    ImageResize: {
      // ...
      minSize: 48, // default. It is equal to minSize: [48, 48]
    },
  },
});

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:

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

DisplaySize - Display pixel size

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

Make sure DisplaySize import after Resize. Otherwise, the display size will be wrong.

The look and feel can be controlled with options:

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

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 { BaseModule, Resize } from 'quill-image-resize-module';

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

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