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"
`

2. 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"
`

2. 修正了一些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

$3

`javascript
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
}
}
});
`

$3

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

`html

`

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

$3

For the default experience, pass an empty object, like so:
`javascript
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:

`javascript
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:

`javascript
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:

`javascript
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:

`javascript
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,

`javascript
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 ],
// ...
}
}
});
``