Vue Element UI 之富文本插件实现图片调整大小（quill-image-resize-module）、图片粘贴（quill-image-drop-module）

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

环境：vue cli3

第一次写这个功能，出现了一些意想不到的报错

• Cannot read property 'imports' of undefined
• Cannot read property 'register' of undefined

一、正确方式

1.安装插件依赖

1、安装 quill-editor

cnpm install vue-quill-editor
cnpm install quill // 这个要安装，否则报错 Cannot read property 'imports' of undefined

2、安装 两个插件

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

2.使用插件

2.1 在mian.js中

// 引入富文本编辑器
import VueQuillEditor from 'vue-quill-editor'
// 富文本编辑器对应的样式
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

// 注册富文本编辑器组件为全局组件
Vue.use(VueQuillEditor)

2.2 在vue.config.js配置文件中

const webpack = require("webpack")
module.exports = {
	// 配置插件参数
	configureWebpack: {
		plugins: [
			new webpack.ProvidePlugin({
				'window.Quill': 'quill'
			})
		]
	}
}

2.3 在组件中使用

<script>
// 引入富文本quill-editor相关组件依赖
import { quillEditor, Quill } from 'vue-quill-editor'
import { container, QuillWatch } from 'quill-image-extend-module'
import ImageResize from 'quill-image-resize-module' // 引用，调整图片大小
Quill.register('modules/imageResize', ImageResize)

export default {
	data() {
		return {
			editorOption: {
				placeholder: '开始编辑吧',
				modules: {
					// 调整图片大小
					imageResize: {
						displayStyles: {
							backgroundColor: 'black',
							border: 'none',
							color: 'white'
						},
						modules: [ 'Resize', 'DisplaySize', 'Toolbar' ]
					}
				}
			}
		}
	}
}
</script>

二、我的调错过程

第一坑：报错Cannot read property 'imports' of undefined

1、代码

<script>
import ImageResize from 'quill-image-resize-module' // 引用，调整图片大小
Quill.register('modules/imageResize', ImageResize)

export default {
	data() {
		return {
			editorOption: {
				modules: {
					// 调整图片大小
					imageResize: {
						displayStyles: {
							backgroundColor: 'black',
							border: 'none',
							color: 'white'
						},
						modules: [ 'Resize', 'DisplaySize', 'Toolbar' ]
					}
				}
			}
		}
	}
}
</script>

2、调 bug

点开报错的 js 文件，看了看，确定报错不是我的错，那么去百度一下吧……

百度的过程中，发现这是一个坑哎，好多人掉进去，哈哈哈

终于，在一篇文章中看到满意的答案：需要安装一个Quill插件

话不多说，安装先走起

npm install quill-image-resize-module --save

嗯……好像还有一点点小问题，那么直接 npm install

嗯，npm install 就是好用，缺啥都给补齐了

附上效果图：

第二坑：报错Cannot read property 'register' of undefined

1、代码

<script>
import ImageDrop from 'quill-image-drop-module'// 引用，粘贴图片
Quill.register('modules/imageDrop', ImageDrop) //粘贴图片

export default {
	data() {
		return {
			editorOption: {
				modules: {
					imageDrop: true  // 图片粘贴
				}
			}
		}
	}
}
</script>

2、调 bug

此时，控制台警告： warning in ./src/components/testPlace/QuillCopyPic.vue?vue&type=script&lang=js& "export 'default' (imported as 'ImageDrop') was not found in 'quill-image-drop-module'

执行 npm install，重启运行，没有作用……

看看引用，需要加上 { }

import { ImageDrop } from 'quill-image-drop-module'

刷新，没有报错了，但是无法实现粘贴

第三坑：使用谷歌浏览器，实现粘贴图片还需要修改插件

参考：https://blog.csdn.net/csdnwyn314/article/details/80541945?depth_1-utm_source=distribute.pc_relevant.none-task&utm_source=distribute.pc_relevant.none-task

火狐浏览器完美支持，是因为火狐自带粘贴图片功能，而谷歌只支持一半，Safari浏览器完全不支持。所以需要修改quill-image-drop-module源文件

在node_modules里找到quill-image-drop-module文件，打开index.js。 里面只有五个函数，一个构造函数，两个粘贴删除监听函数，以及两个功能函数。

修改handlePaste() 粘贴函数，添加浏览器判断：

handlePaste(evt) {
    if (evt.clipboardData && evt.clipboardData.items && evt.clipboardData.items.length) {
        this.readFiles(evt.clipboardData.items, dataUrl => {
            const userAgent = navigator.userAgent; // 取得浏览器的userAgent字符串
            if (userAgent.indexOf('Firefox') > -1) {
                const selection = this.quill.getSelection();
                if (selection) {
                } else {
                  setTimeout(() => this.insert(dataUrl), 0);
                }
           } else {
               setTimeout(() => this.insert(dataUrl), 0);
           }
        });
    }
}

效果图：（因为写了图片上传服务器，所以粘贴之后立即自动完成图片上传）