本文共 2408 字，大约阅读时间需要 8 分钟。

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-editorcnpm install quill // 这个要安装，否则报错 Cannot read property 'imports' of undefined

2、安装 两个插件

cnpm install quill-image-resize-module --savecnpm 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 在组件中使用

二、我的调错过程

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

1、代码

2、调 bug

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

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

话不多说，安装先走起

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

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

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

附上效果图：

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

1、代码

2、调 bug

看看引用，需要加上 { }

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

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

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

参考：

火狐浏览器完美支持，是因为火狐自带粘贴图片功能，而谷歌只支持一半，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);           }        });    }}

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

转载地址：https://blog.csdn.net/qq_41956139/article/details/104967299 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！