中文文档：https://www.kancloud.cn/liuwave/quill/1409371

<template>
  <div>
    <quill-editor
      id="xj-editor"
      ref="myQuillEditor"
      v-model="editContent"
      :options="editorOption"
      @blur="onEditorBlur($event)"
      @focus="onEditorFocus($event)"
      @ready="onEditorReady($event)"
      :style="{height: height, width: width}"
    >
      <div id="toolbar" slot="toolbar">
       <!-- 自定义工具栏可以是内部工具也可以自己添加的按钮 -->
        <button class="ql-bold"></button>
        <button class="ql-italic"></button>
        <button class="ql-underline"></button>
        <button class="ql-strike"></button>
        <select class="ql-color"></select>
        <select class="ql-background"></select>
        <button class="ql-image"></button>
        <select class="ql-size">
          <option value="small">12px</option>
          <option selected>13px</option>
          <option value="large">19px</option>
          <option value="huge">32px</option>
        </select>
        <select class="ql-header">
          <option selected>正文</option>
          <option value="1">标题1</option>
          <option value="2">标题2</option>
          <option value="3">标题3</option>
          <option value="4">标题4</option>
        </select>
        <select class="ql-align"></select>
      </div>
    </quill-editor>
    <el-upload
      v-show="false"
      action=""
      :show-file-list="false"
      :on-success="handleAvatarSuccess"
      accept="image/png, image/jpeg"
      :on-change="handleChange"
      :http-request="upload"
    >
      <el-button ref="upload"></el-button>
    </el-upload>
  </div>
</template>
<script>
import upload from '../utils/fileUpload'  // 自定义文件上传方法
import { quillEditor } from "vue-quill-editor"
import "quill/dist/quill.snow.css" // 富文本编辑器外部引用样式  
import * as Quill from "quill" // 富文本基于quill

export default {
  components: { quillEditor },
  mixins: [upload],
  props: {
    height: {
      type: String,
      default: '400px'
    },
    width: {
      type: String,
      default: '100%'
    },
    content: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      editContent: this.content,
      editorOption: {
        modules: {
          toolbar: {
            container: '#toolbar',
            handlers: {
             // 监听工具栏按钮被点击
              'image': (val) => {
                this.insertImgClick()
              }
            }
          }
        },
        placeholder: '请输入内容'
      },
    }
  },
  watch: {
    imageUrl(val) {
      if (val) {
        let quill = this.$refs.myQuillEditor.quill   // quill实例
        let index = quill.getSelection().index || 0  // 获取当前光标位置
        quill.insertEmbed(index, 'image', val)      // 当前光标位置插入图片标签和地址
        quill.setSelection(index + 1)                    // 光标后移一位
      }else {
        this.$message.warning('图片插入失败')
      }
    },
    editContent(val) {
      this.$emit('update:content', val)
    }
  },
  created() {},
  methods: {
    getContent() {
      return this.content
    },
    onEditorBlur() {},
    onEditorFocus() {},
    onEditorReady() {},
    insertImgClick() {
      // 自定义图片上传
      this.$refs.upload.$el.click()
    },
  },
}
</script>
<style lang="scss" scoped>
</style>

// fileUpload.js
import request from "@/utils/request"

export default {
  data() {
    return {
      fileList: [],
      imageUrl: '',
      uploadLoading: false
    }
  },
  methods: {
    handleAvatarSuccess() {},
    handleChange(file, fileList) {
      this.fileList = fileList
      this.uploadLoading = true
    },
    upload(param) {
      if (this.uploadValidate) {
        if (this.uploadValidate()) {
          this.fileUpload(param)
        }
      } else {
        this.fileUpload(param)
      }
      // const fileSize = Math.round((param.file.size * 100) / (1024 * 1024)) / 100
      // const types = ["png", "jpg", "jpeg", "PNG", "JPEG", "JPG"]
      // const fileName = param.file.name

      // const isType = types.some((type) => {
      //   return param.file.type.indexOf(type) >= 0
      // })

      // if (fileSize > 2) {
      //   this.$message({
      //     type: "warning",
      //     message: "文件大小不可超过2MB !",
      //   })
      //   return
      // }

      // if (fileName.length && fileName.length >= 100) {
      //   this.$message({
      //     type: "warning",
      //     message: "文件名不可超过100个字符 !",
      //   })
      //   return
      // }
    },
    fileUpload(param) {
      let file
      file = new FormData()
      file.append("file", param.file)
      file.append("fileName",  param.file.name)
      file.append("description", "")
      file.append("tagIds", [])
      // debugger
      request({
        url: '/admin/upload/fileUpload',
        method: 'post',
        headers: {
          'Content-Type': 'multipart/form-data'
        },
        data: file
      }).then((res) => {
        this.uploadLoading = false
        if (res.code == 10200) {
          this.imageUrl = res.data
        }
      }).catch(e => {
        this.uploadLoading = false
      })
    },
  },
}