「VUE插件」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)
    })
  })
}
Posted in JS