quill-image-resize-module--fix-imports-error

IMPORTANT NOTE:

It's a package forked from https://github.com/kensnyder/quill-image-resize-module/blob/master/demo/index.html, with just a bit of fixes:

1. import Parchment from node_modules (instead of directly from window.Quill.imports)

const Parchment = window.Quill.imports.parchment;

to

import Parchment from 'parchment'

This solved the error:

"Cannot read property 'imports' of undefined"

1. Edit some mistake in document

imageResize: { // See optional "config" below }

to

imageResize: {
    // See optional "config" below
}

重要訊息:

這個package原作者為https://github.com/kensnyder/quill-image-resize-module/blob/master/demo/index.html 我只修改了幾個部分：

1. 修正了Parchment的引入方式，改為直接由node_modules引入

const Parchment = window.Quill.imports.parchment;

改為

import Parchment from 'parchment'

這解決了原套件發生的如下錯誤：

"Cannot read property 'imports' of undefined"

1. 修正了一些document裡面的勘誤

imageResize: { // See optional "config" below }

改為

imageResize: {
    // See optional "config" below
}

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

import Quill from 'quill';
import { ImageResize } from 'quill-image-resize-module';
 
Quill.register('modules/imageResize', ImageResize);
 
const quill = new Quill(editor, {
    // ...
    modules: {
        // ...
        imageResize: {
            // 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: {
        // ...
        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',
                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: {
        // ...
        imageResize: {
            modules: [ MyModule, Resize ],
            // ...
        }
    }
});