quill-editor图片缩放、在一个页面使用多个富文本框、quill-editor上传图片地址为服务器地址

quill官方文档Quickstart - Quill Rich Text Editor

中文版文档前言 · Quill官方中文文档 · 看云

   原本直接使用的quill-editor富文本，但是上传图片的base64编码长度太长了，需要转成服务器的url地址，并且一个页面需要使用多个富文本框

贴两个参考的文档 

在vue3.0中，使用quill-editor的图片拖拽缩放功能 - 冰晨之露 - 博客园

vue-quill-editor编辑器在一个页面使用多个富文本框上传图片时报TypeError: Cannot read property ‘index‘ of null错误的解决方法_yx111115的博客-CSDN博客

完整代码

1、安装依赖

npm install vue-quill-editor
npm install quill
npm install quill-image-drop-module
npm install quill-image-resize-module

2、在main.js中引入

//富文本
//引入quill-editor编辑器
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);
//实现quill-editor编辑器拖拽上传图片
import * as Quill from 'quill'
import { ImageDrop } from 'quill-image-drop-module'
Quill.register('modules/imageDrop', ImageDrop)

//实现quill-editor编辑器调整图片尺寸
import ImageResize from 'quill-image-resize-module'
Quill.register('modules/imageResize', ImageResize)

3、封装组件editor.vue

在一个页面中使用多个富文本框上传图片时如果报错TypeError: Cannot read property ‘index‘ of null，则是因为quill-editor的ref值被写死了

核心代码

1、input绑定动态 ref 值

2、富文本组件的ref 值

 3、触发图片上传的方法一定要获取到当前页面中的富文本对应的input，利用input对应的ref值获取，就因为这句代码写错了，每次上传的图片都插入到了第一个富文本框中，浪费了四个小时才发现是触发上传的方法没有写对┭┮﹏┭┮ 

原本是通过父组件穿quillIndex的值，触发第几个input的click事件，但是该方法有个弊端，如果某个富文本编辑器需要隐藏，但是页面渲染了该元素，index的值可能有冲突。但是如果通过input的ref值触发click，可保证是唯一的。（可能描述的不清楚，就是两个触发click的方法都可行，但是第一种在某种情况下会存在bug，第二种不会）