quillEditor.vue

<template>
  <div>
    <quill-editor
      :id="randomId(3)"
      :ref="myEditor"
      v-model="content"
      :options="options"
      @change="onChange($event)"
      style="width: 100%; height: 100%"
    />
    <el-upload 
      :key="randomId(3)"
      class="upload-col"
      :auto-upload="false"
      :accept="accept"
      action=""
      multiple
      :before-upload="beforeUpload"
      :data="myHeaders"
      :on-change="fileAdd"
      ref="upload"
    >
    </el-upload>
  </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'
/**
 * 富文本
 * content 内容
 * options 参数配置
 * 
*/
// 工具栏配置
const toolbarOptions = [
  ["bold", "italic", "underline", "strike"],       // 加粗 斜体 下划线 删除线
  ["blockquote", "code-block"],                    // 引用  代码块
  [{ list: "ordered" }, { list: "bullet" }],       // 有序、无序列表
  [{ indent: "-1" }, { indent: "+1" }],            // 缩进
  [{ size: ["small", false, "large", "huge"] }],   // 字体大小
  [{ header: [1, 2, 3, 4, 5, 6, false] }],         // 标题
  [{ color: [] }, { background: [] }],             // 字体颜色、字体背景颜色
  [{ align: [] }],                                 // 对齐方式
  ["clean"],                                       // 清除文本格式
  ["link", "image", "video"]                       // 链接、图片、视频
];
export default {
  props: {
    /* 编辑器的内容 */
    value: {
      type: String
    },
    /* 编辑器的索引 */
    quillIndex: {
      type: Number,
      default: 0
    },
    /* 编辑器的唯一标识符 */
    myEditor: {
      type: String,
      default: "quillEditor"
    }
  },
  components: {
    quillEditor
  },
  computed: {
    editor () {
      return this.$refs.myEditor.quillEditor;
    },
  },
  data () {
    return {
      accept: 'image/*',
      imageTypes: ['jpg', 'jpeg', 'png', 'gif'],
      maxFileLen: 0,
      content: this.value,
      options: {
        theme: "snow", // or 'bubble'
        placeholder: "请输入内容",
        modules: {
          toolbar: {
            container: toolbarOptions,
            handlers: {
              image: (value) => {
                if (value) {
                  document.querySelectorAll(".upload-col input")[this.quillIndex].click();
                } else {
                  this.quill.format("image", false);
                }
              }
            }
          }
        }
      },
      myHeaders: { token: localStorage.getItem('token') },
    }
  },
  watch: {
    value: function () {
      this.content = this.value;
    }
  },
  methods: {
    randomId (len) {
      var chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';
      var tempLen = chars.length, tempStr = '';
      for (var i = 0; i < len; ++i) {
        tempStr += chars.charAt(Math.floor(Math.random() * tempLen));
      }
      return tempStr;
    },
    // 图片单个或者批量按照顺序上传
    fileAdd (fileobj, filelist) {
      let currLength = filelist.length
      this.maxFileLen = Math.max(currLength, this.maxFileLen)
      setTimeout(() => {
        if (currLength != this.maxFileLen) return
        this.maxFileLen = 0
        this.$refs.upload.clearFiles()
        this.fileUpload(filelist)
      })
    },
    fileUpload (files) {
      var param = new FormData()
      files.forEach(item => {
        param.append('fileList', item.raw)
      })
      this.$http({
        url: this.$http.adornUrl('XXXXXX'),
        method: 'post',
        data: param
      }).then(res => {
        if (res.data.code === 0) {
          const quill = this.$refs["" + this.myEditor+ ""].quill
            , length = quill.getSelection().index
          var fileList = res.data.fileList.reverse()
          fileList.forEach(item => {
            quill.insertEmbed(length, 'image', item)
            quill.setSelection(length + 1) //定位索引
          })
        }
      }).catch(err => {
        this.$message.error('上传图片失败！请重新上传')
      })
    },
    beforeUpload (file) {
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isLt2M) {
        this.$message({
          message: '图片单张不得超过2M，请重新选择！',
          type: 'error'
        })
      }
      return isLt2M
    },
    onChange({ html }) {
      this.$emit("input", this.content);
    }
  }
}
</script>
<style lang="scss" scoped>
.upload-col {
  height: 0;
  width: 0;
  overflow: hidden;
}
</style>

需要注意的点

<el-upload> 和<quill-editor> 里面的id 和 key ，取随机数 randomId(3)

富文本组件里的ref属性 :ref="myEditor"

批量图片调用后需要清空 this.$refs.upload.clearFiles()，才能再一次使用

页面可以多次调用

<template>
<quill-editor v-model="content1" :quillIndex="0" myEditor="Editorc0"/>
<quill-editor v-model="content2" :quillIndex="1" myEditor="Editorc1"/>
.
.
.
</template>
<script>
import quillEditor from './quillEditor'
export default {
	data () {
		return{
			content1:'',
			content2:''
		}
	},
	components: {
		quillEditor
	}
}
</script>