一、前言

我在vue-quill-editor的Github认识了这两个插件。

quill-image-drop-module：允许粘贴图像并将其拖放到编辑器中。
quill-image-resize-module：允许调整图像大小。

都很实用呐！
然而DEMO不够详细，实际引用时，报了很多错误。
如Cannot read property 'imports' of undefined"、
Failed to mount component: template or render function not defined.、
Cannot read property 'register' of undefined。

下面说一下正确的引用姿势。

二、我的环境

Webpack + Vue-Cli 2.0 (vue init非simple的版本)

三、正文

1、确保你的quill富文本编辑器（不添加插件时）可以正常运行。

2、安装NPM依赖。

cnpm install quill-image-drop-module -S
cnpm install quill-image-resize-module -S

3、在build文件夹下找到webpack.base.conf.js。

修改：

module.exports = {
	plugins: [
	        new webpack.ProvidePlugin({
        		// 在这儿添加下面两行
	            'window.Quill': 'quill/dist/quill.js',
	            'Quill': 'quill/dist/quill.js'
        })
	]
}

4、修改你在页面引用的“quill富文本组件”。

修改<script>标签内代码：

	//	以前需要有下面几行：
    import { quillEditor } from 'vue-quill-editor' //注意quillEditor必须加大括号，否则报错。
    import "quill/dist/quill.core.css";//
    import "quill/dist/quill.snow.css";

    // 新增下面代码：
    import resizeImage from 'quill-image-resize-module' // 调整大小组件。
    import { ImageDrop } from 'quill-image-drop-module'; // 拖动加载图片组件。
    Quill.register('modules/imageDrop', ImageDrop);
    Quill.register('modules/resizeImage ', resizeImage )

然后，修改页面引用的:options="editorOption"。

editorOption: {
	modules: {
	// 新增下面
		imageDrop: true, // 拖动加载图片组件。
        imageResize: { //调整大小组件。
             displayStyles: {
                 backgroundColor: 'black',
                 border: 'none',
                 color: 'white'
             },
             modules: [ 'Resize', 'DisplaySize', 'Toolbar' ]
         }
	}
}

重新 npm run dev ，插件运行成功！