使用vue-quill-editor编辑器--自定义上传图片-图片拖拽-鼠标悬停提示

quill的官网

在vue里面使用quill的扩展模块vue-quill-editor
效果图：
实现：
1.鼠标悬停时的提示，
2.因为编辑器默认图片是base64格式，所以需要自定义上传图片到服务器，通过服务器给的ID返回给后端，后端再给出URL然后前端插入在编辑器中
3.图片的拖拽和缩放

1、下载Vue-Quill-Editor

npm install vue-quill-editor --save

2、下载quill（Vue-Quill-Editor需要依赖）

npm install quill --save

3、拖拽，缩放模块

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

两种引用方法：全局引用和局部引用

• 全局引用

项目入口文件中（main.js）注册（也可以写在一个js里面然后把这个js引到main里面）

import Vue from 'vue'
import VueQuillEditor from 'vue-quill-editor'

// require styles
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

Vue.use(VueQuillEditor)

局部引用，在需调用的vue页面中声明

import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

import {
    quillEditor } from 'vue-quill-editor'

export default {
   
  components: {
   
    quillEditor
  }
}

局部代码：

<template>
    <div>
      <quill-editor 
    ref="myQuillEditor"
    @change='onEditorChange' 
    :content="content"
    :options="editorOption"></quill-editor>
    </div>
</template>
<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import {
    quillEditor } from 'vue-quill-editor';

export default {
   
    data(){
   
        return{
   
            content: '',
            editorOption: {
   
               placeholder: '编辑文章内容'
             },
        }
    },
    components: {
   
        quillEditor
    },
    methods:{
   
        onEditorChange({
    editor, html, text }) {
   
            this.content = html;
        },
    }
}
</script>

我是全局引入的
全部代码：

<template>
<div class="box">
    <el-upload
        class="avatar-uploader"
        action="#"
        name="img"
        :show-file-list="false"
        :auto-upload="false"
        :on-change="changeFile"
        :before-upload="beforeUpload">
        </el-upload>
  <!-- 富文本编辑器组件 -->
  <el-row v-loading="uillUpdateImg">
  <quill-editor 
    ref="myQuillEditor"
    @change='onEditorChange' 
    :content="content"
    :options="editorOption"></quill-editor>
    <!-- 显示字数 -->
    <span class="sizeTishi">{
   {
   tiLength}}/10000</span>
  </el-row>
</div>
</template>

<script>
import editorTarbar from '@/utils/editorTarbar' //头部的功能配置
import uploadPicToIOBS from '@/api/content/article/api.js'
import {
    saveImageUploadRecord, getIobsUrl }