vue-quill-editor 添加自定义上传图片功能（上传至

vue-quill-editor 默认的是以base64保存图片，会直接把图片base64和内容文本一同以字符串的形式提交到后端。 现在这样不科学

安装 vue-quill-editor

npm i vue-quill-editor --save

富文本示例代码
https://github.com/gek6/letou_hr/blob/master/letou_admin_web/src/views/rich_text/rich_text.vue
图片直传七牛云
https://github.com/gek6/letou_hr/blob/master/letou_admin_web/src/api/upload.js

思路

• 用自定义的方法代替quill-editor中的图片点击事件
• 点击上传图片的icon后，去触发file类型 input 的点击事件，选择图片。（我这用的是饿了么的上传组件，上传到七牛云我已经写好了）
• 监听input的 onchange 拿到选择的文件数据，然后是要上传到自己服务器呢 还是上传到七牛云 就随意了。
• 上传完成以后 将图片的远程路径 添加到富文本内容区域

页面内引入

import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'
//注册组件
components: {
    quillEditor
},

<div class="rich_box">
    <!--富文本组件-->
    <quill-editor v-model="content" ref="myQuillEditor" :options="options"></quill-editor>
</div>
<!--饿了么上传组件，也可以用input代替，都是隐藏起来-->
<el-upload
    class="avatar-uploader"
    action=""
    :http-request="to_upload_img"
    :show-file-list="false"
    style="display: none"
    >
    <i class="el-icon-plus avatar-uploader-icon" id="imgInput"></i>
</el-upload>

添加自定义方法

//mounted钩子中 替换插件图标点击事件
// 为图片ICON绑定事件  getModule 为编辑器的内部属性
this.$refs.myQuillEditor.quill.getModule('toolbar').addHandler('image', this.imgHandler)

// 点击图片ICON触发事件
imgHandler(state) {
  console.log(state)
  this.addRange = this.$refs.myQuillEditor.quill.getSelection()
  if (state) {
    // let fileInput = document.getElementById('imgInput')
    // fileInput.click() // 加一个触发事件
    // 选择并上传一张图片
    let fileInput = document.getElementById('imgInput')
    fileInput.click() // 加一个触发事件
  }
},

to_upload_img(formdata){
  return new Promise((resolve,reject)=>{
    upload_img(formdata).then(res=>{
      // 图片的远程路径
      let value = res.key;
      // 将图片添加到富文本内容区域
      this.addRange = this.$refs.myQuillEditor.quill.getSelection();
      // 调用编辑器的 insertEmbed 方法，插入URL
      this.$refs.myQuillEditor.quill.insertEmbed(this.addRange !== null ? this.addRange.index : 0, 'image', value, Quill.sources.USER)   
     
    })
  })
}