【已解决】Vue引用quill富文本编辑器,图片处理的两个神器插件(quill-image-drop-module、quill-image-resize-module)的正确姿势。(解决各种报错)

一、前言

我在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富文本组件”。

修改

你可能感兴趣的:(vue,前端)