Quill ImageRotate Module

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

Demo

Plunker

Usage

Webpack/ES6

import Quill from "quill";
import { ImageRotate } from "quill-image-rotate-module";
 
Quill.register("modules/ImageRotate", ImageRotate);
 
const quill = new Quill(editor, {
    // ...
    modules: {
        // ...
        ImageRotate: {
            // See optional "config" below
        }
    }
});

Script Tag

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

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

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

Config

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

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

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: {
        // ...
        ImageRotate: {
            modules: ["Toolbar"]
        }
    }
});

Each module is described below.

Rotate - Rotate the image

Adds handles to the image's corners which can be dragged with the mouse to rotate the image.

The look and feel can be controlled with options:

var quill = new Quill(editor, {
    // ...
    modules: {
        // ...
        ImageRotate: {
            // ...
            handleStyles: {
                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: {
        // ...
        ImageRotate: {
            // ...
            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 { Rotate, BaseModule } from "quill-image-rotate-module";
 
class MyModule extends BaseModule {
    // See src/modules/BaseModule.js for documentation on the various lifecycle callbacks
}
 
var quill = new Quill(editor, {
    // ...
    modules: {
        // ...
        ImageRotate: {
            modules: [MyModule, Rotate]
            // ...
        }
    }
});