vue-quill-editor上传内容因为图片是base64的致使字符太长的问题解决

vue-quill-editor是个较为轻量级富文本框，相较于ueditor，开发更编辑，更加直观，若是你们伙在需求容许的状况下，仍是会比较建议使用vue-quill-editor

vue-quill-editor的使用方法在这边就很少说了，你们网上查下，一抓一大把

可是在使用vue-quill-editor有一个致命的问题，vue-quill-editor默认插入图片是直接将图片转为base64再放入内容中，若是图片比较大的话，富文本的内容就会很大，即便图片不大，只要图片较为多，篇幅较长，富文本的内容也是异常的大的，

这就会给你们带来一些烦恼，咱们可能更但愿在提交富文本的内容的时候图片只是以图片地址提交，那这样一来咱们要怎么去处理呢，接下来你们能够来理一理

仍是老思路，既然咱们能够但愿不是直接将图片转成base64，那么咱们能够采用选择完图片，即将图片上传服务器，服务器返回相应的图片连接，前端将图片连接插入到富文本的指定光标上便可，这样一来就能够实现咱们的想要的效果了

首先，新建富文本组件QuillEditor.vue，利用iview的上传组件来上传选择完的图片（固然，其余的上传组件也是ok的）

 1     <Upload
 2         id="iviewUp"
 3           ref="upload"
 4           :show-upload-list="false"
 5           :on-success="handleSingleSuccess"
 6           :format="['jpg','jpeg','png']"
 7           :max-size="2048"
 8           :headers="header"
 9           :on-format-error="handleFormatError"
10           :before-upload="handleBeforeUpload()"
11           type="drag"
12           :action="serverUrl"
13           style="display: none;width:0">
14           <div style="width: 0">
15               <Icon type="ios-camera" size="50"></Icon>
16           </div>
17       </Upload>
18       <!--<Row>-->
19         <quill-editor 
20           v-model="detailContent" 
21           ref="myQuillEditor" 
22           :options="editorOption" 
23           @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
24           @change="onEditorChange($event)">
25         </quill-editor>
26       <!--</Row>-->

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

 1     handleSingleSuccess (res, file) {
 2       // res为图片服务器返回的数据
 3       // 获取富文本组件实例
 4       let vm = this
 5       let quill = this.$refs.myQuillEditor.quill
 6       console.log('res---', vm.$refs.myQuillEditor.quill.getSelection())
 7       // 若是上传成功
 8       if (res.res_code === '1') {
 9           // 获取光标所在位置
10           let length = quill.getSelection().index;
11           // 插入图片  res.info为服务器返回的图片地址
12           quill.insertEmbed(length, 'image', res.result.url)
13           // 调整光标到最后
14           quill.setSelection(length + 1)
15       } else {
16           vm.$Message.error('图片插入失败')
17       }
18       // loading动画消失
19       this.quillUpdateImg = false
20     }

经过 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节点的点击事件，将其绑在富文本的图片按钮点击事件上好了，基本上大功告成。仍是算比较简单的，但愿能够供你们参考