如何解决vue-quill-editor上传内容由于图片是base64导致字符太长的问题

看到上面的代码有的的就会有疑问了，那上传好的图片要怎么插到富文本的指定光标里面呢，别慌，面包会有的，往下看，

handleSingleSuccess (res, file) {
   // res为图片服务器返回的数据
   // 获取富文本组件实例
   let vm = this
   let quill = this.$refs.myQuillEditor.quill
   console.log('res---', vm.$refs.myQuillEditor.quill.getSelection())
   // 如果上传成功
   if (res.res_code === '1') {
     // 获取光标所在位置
     let length = quill.getSelection().index;
     // 插入图片 res.info为服务器返回的图片地址
     quill.insertEmbed(length, 'image', res.result.url)
     // 调整光标到最后
     quill.setSelection(length + 1)
   } else {
     vm.$Message.error('图片插入失败')
   }
   // loading动画消失
   this.quillUpdateImg = false
  }

通过 this.$refs.myQuillEditor.quill.getSelection().index获取光标所在位置，将图片地址放在该位置即可

这样一来万事俱备，只欠东风了，这个时候大家会发现，那iview这个上传组件在页面上呢，我怎么实现点击富文本上的上传图片的按钮调用iview的上传组件的方法呢，

这个时候我们就要用到富文本中的配置属性editorOption，对editorOption进行图片上传的点击事件进行相应的配置即可，详情看下面代码

 editorOption: { // 富文本框配置
     placeholder: '',
     theme: 'snow', // or 'bubble'
     modules: {
       toolbar: {
         container: toolbarOptions, // 工具栏
         handlers: {
           'image': function (value) {
 

if (value) {
               document.querySelector('#iviewUp input').click()
             } else {
               this.quill.format('image', false);
             }
           }
         }
       }
     }
   }

 document.querySelector('#iviewUp input') 这个就是相应的dom节点的点击事件，将其绑在富文本的图片按钮点击事件上好了。

以上是“如何解决vue-quill-editor上传内容由于图片是base64导致字符太长的问题”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！