背景描述

使用默认的图片上传的操作， 图片经过转码后字节过大， 后端可能会保存失败

解决思路

使用element 的上传组件， 重写富文本默认的上传事件； 触发ele的上传， 拿到上传后的文件信息，将此存在云端上。 利用云端给出的地址给quill-editor 赋值并传给后端。

上代码！！！！

1、安装插件      

npm install vue-quill-editor --save

2、 引入插件

我们是nuxt的工程， 须在nuxt.config.js中引入， 普通vue工程直接main.js里引入即可

  plugins: [
   
    { src: '@/plugins/vue-quill-editor', mode: 'client' },
   
  ],

3、以下是我将插件进行组件化的封装( 代码不完整！！！)

<template>
  <client-only>
    <div>
      <quill-editor
        ref="myQuillEditor"
        :value="quillContent"
        :options="editorOption"
        @change="onEditorChange"
      ></quill-editor>
        
      <el-upload
        accept="image/png,image/jpeg,image/jpg,image/gif"
        class="avatar-uploader quill-img"
        :before-upload="getcloudDataMthod"
        :action="pictureUrl"
        :multiple="false"
        :show-file-list="false"       
        :on-success="uploadSuccess"
        :data="uploadFileData"
      >
      </el-upload>
    </div>
  </client-only>
</template>

<script>
const toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'], 
  [{ header: 1 }, { header: 2 }], 
  [{ list: 'ordered' }, { list: 'bullet' }], 
  [{ indent: '-1' }, { indent: '+1' }], 
  [{ direction: 'rtl' }], 
  [{ color: [] }, { background: [] }],
  [{ align: [] }],
  ['image'], 
]
export default {
  props: {
    quillContent: {
      type: String,
      default: '',
    },
  },
  data() {
    const _this = this
    return {
      pictureUrl: '',
      uploadFileData: null,
      editorOption: {
        theme: 'snow',
        modules: {
          toolbar: {
            container: toolbarOptions, 
            handlers: {
              image(value) {
                if (value) {
                  document.querySelector('.quill-img input').click()
                } else {
                  _this.quill.format('image', false)
                }
              },
            },
          },
        },
      },
    }
  },
  methods: {
    async getcloudDataMthod(file) {
        const { data } = await '云端接口地址'
        this.uploadFileData = {
            upload上传时需要的参数， 利用上方的data进行组装
         }
    },

    uploadSuccess(res) {
      const quill = this.$refs.myQuillEditor.quill
      quill.focus()
      quill.insertEmbed(quill.getSelection().index, 'image', res.filePath)
    },
    onEditorChange(e) {
      this.$emit('update:quillContent', e.html)
    }
  },
}
</script>