vue-quill-editor二次封装,实现自定义文件上传方式

<template>
  <div>
    <quill-editor ref="quillEditor" :options="editorOption" :content="content" @change="onEditorChange($event)"
      @blur="$emit('blur')"></quill-editor>
    <!-- 隐藏的upload -->
    <el-upload class="uploadFile" drag action="#" :http-request="uploadFile" :limit="1" :on-exceed="handleExceed"
      :on-remove="handleRemove" :file-list="fileList">
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">
        将文件拖到此处，或<em>点击上传</em>
      </div>
    </el-upload>
  </div>
</template>

<script>
import Quill from 'quill';
import { quillEditor } from "vue-quill-editor";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import { editorUploadPath } from "@/api/excel/excel.js";
 
// 工具栏配置
const toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
  ['blockquote', 'code-block'],
 
  [{ 'header': 1 }, { 'header': 2 }],               // custom button values
  [{ 'list': 'ordered' }, { 'list': 'bullet' }],
  [{ 'script': 'sub' }, { 'script': 'super' }],      // superscript/subscript
  [{ 'indent': '-1' }, { 'indent': '+1' }],          // outdent/indent
  [{ 'direction': 'rtl' }],                         // text direction
 
  [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
  [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
 
  [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
  [{ 'font': [] }],
  [{ 'align': [] }],
  ['link', 'image', 'video', 'upload'],
  ['clean']                                         // remove formatting button
]
 
// 自定义插入a链接
var Link = Quill.import('formats/link');
class FileBlot extends Link {  // 继承Link Blot
  static create(value) {
    let node = undefined
    if (value && !value.href) {  // 适应原本的Link Blot
      node = super.create(value);
    }
    else {  // 自定义Link Blot
      node = super.create(value.href);
      node.setAttribute('download', value.innerText);  // 左键点击即下载
      node.innerText = value.innerText;
      node.download = value.innerText;
    }
    return node;
  }
}
FileBlot.blotName = 'link';
FileBlot.tagName = 'A';
Quill.register(FileBlot);
 
export default {
  name: "quill-editor-upload",
  components: { quillEditor },
  // 自定义v-model，prop为props中的属性，代表v-model传入的值；event表示反向输出给v-model的事件名
  model: {
    prop: 'content',
    event: 'changeContent'
  },
  // 自定义v-model, v-model传入的值
  props: {
    content: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      fileList: [], // 文件列表
      // editor配置
      editorOption: {
        placeholder: '请输入正文......',
        modules: {
          toolbar: {
            container: toolbarOptions,  // 工具栏
            handlers: {
              // 模拟upload按钮点击事件
              'upload': (value => {
                if (value) {
                  document.querySelector('.uploadFile input').click()
                }
              })
            }
          }
        }
      }
    }
  },
  methods: {
    // 自定义v-model，将editor选择器change事件提供的html传出去
    onEditorChange(e) {
      this.$emit('changeContent', e.html)
    },
    // 自定义文件上传
    uploadFile(res) {
      // console.log('上传成功', res);
      let myFormData = new FormData();
      myFormData.append("file", res.file);
      editorUploadPath(myFormData).then((response) => {
        if (response.code === 0) {
          let fileNameLength = res.file.name.length
          // 插入链接
          let quill = this.$refs.quillEditor.quill
          let length = quill.getSelection().index;
          quill.insertEmbed(length, 'link', { href: response.msg, innerText: res.file.name }, "api")
          quill.setSelection(length + fileNameLength)
          this.fileList = []
        }
      });
    },
    // 文件超出限制提示
    handleExceed() {
      this.$message.warning(`当前限制选择 1 个文件,请删除后更新！`);
    },
    // 移除文件
    handleRemove() {
      this.fileList = [];
    },
  }
}
</script>

<style scoped>
/* 文件上传图标样式 */
/deep/ .quill-editor .ql-snow.ql-toolbar .ql-formats .ql-upload {
  background: url("../assets/file.png");
  background-size: 16px 16px;
  background-position: center center;
  background-repeat: no-repeat;
}
 
/* 隐藏upload上传，用模拟事件触发 */
.uploadFile {
  width: 0;
  height: 0;
  display: none;
}
</style>

<el-form-item label="内容" prop="content">
    <quillEditorUpload v-model="form.content"></quillEditorUpload>
</el-form-item>