vue-quill-editor上传内容由于图片是base64的导致字符太长的问题解决,把vue-quill-editor封装成组件

vue-quill-editor是个较为轻量级富文本框，相较于ueditor，开发更编辑，更加直观，如果大家伙在需求允许的情况下，还是会比较建议使用vue-quill-editor

vue-quill-editor的使用方法在这边就不多说了，大家网上查下，一抓一大把

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

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

还是老思路，既然我们可以希望不是直接将图片转成base64，那么我们可以采用选择完图片，即将图片上传服务器，服务器返回相应的图片链接，前端将图片链接插入到富文本的指定光标上即可，这样一来就可以实现我们的想要的效果了
这边我把veu-quill-editor封装成一个组件，下面上代码

<template>
  <div>
    <el-upload
            :headers="getHeader" //token
            :with-credentials='true' //是否启用session
            :multiple="multiple" //多选
            :limit='limit' // 数量
            class="quill-upload"
            :action="serviceUrl" // 后台接收接口
            style="display: none;width:0"
            :show-file-list="false"
            :on-success="success"
            :before-upload="beforeAvatarUpload" //文件上传之前做校验
    >
      <!-- <el-button size="small" type="primary">点击上传</el-button> -->
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">
        将文件拖到此处，或
        <em>点击上传</em>
      </div>
      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
    </el-upload>
    <quill-editor
            ref="myQuillEditor"
            :content = 'content'
            v-model="editorData"
            :options="editorOption"></quill-editor>
  </div>
</template>
<script>
  import 'quill/dist/quill.core.css';
  import 'quill/dist/quill.snow.css';
  import 'quill/dist/quill.bubble.css';
  import {quillEditor, Quill} from 'vue-quill-editor'
  export default {
    name: "editor",
    components: {quillEditor},
    props: ['serviceUrl','getHeader','content','limit','multiple'],
    data() {
      // 富文本配置
      const toolbarOptions = [
        ['bold', 'italic', 'underline', 'strike'], // toggled buttons
        ['blockquote', 'code-block'],

        [{ header: 1 }, { header: 2 }], // custom button values
        [{ list: 'ordered' }, { list: 'bullet' }],
        [{ script: 'sub' }, { script: 'super' }], // superscript/subscript
        [{ indent: '-1' }, { indent: '+1' }], // outdent/indent
        [{ direction: 'rtl' }], // text direction

        [{ size: ['small', false, 'large', 'huge'] }], // custom dropdown
        [{ header: [1, 2, 3, 4, 5, 6, false] }],

        [{ color: [] }, { background: [] }], // dropdown with defaults from theme
        [{ font: [] }],
        [{ align: [] }],
        ['image'],
        ['clean'] // remove formatting button
      ]
      return {
        editorOption: {
          placeholder:'请输入内容',
          modules: {
            toolbar: {
              container: toolbarOptions,
              handlers: {
                // 重写点击组件上的图片按钮要执行的代码
                'image': function (value) {
                  document.querySelector('.quill-upload .el-icon-upload').click()
                }
              }
            }

          }
        },
        editorData:''
      }
    },
    methods: {
      beforeAvatarUpload(file) {
        this.$emit('beforeAvatarUpload',file)
      },
      success(res,file,fileList){
        // res为图片服务器返回的数据
        // 获取富文本组件实例
        let vm = this
        let quill = this.$refs.myQuillEditor.quill
        // 如果上传成功
        if (res.code === '1') {
          // 获取光标所在位置
          const pos=quill.selection.savedRange.index //这个得注意下，网上很多都是不对的
          // 插入图片到光标位置
          quill.insertEmbed(pos,'image',res.data[0].url)
          // 调整光标到最后
          quill.setSelection(length + 1)
        } else {
          vm.$Message.error('图片插入失败')
        }
        // loading动画消失
        this.quillUpdateImg = false
      },
    },
    watch: {
      serviceUrl(val){
        this.serviceUrl = val
      },
      getHeader(val){
        this.getHeader = val
      },
      editorData(val){
        this.$emit('getEditorData',this.editorData)
      },
      content(val){
        this.content =val
      }
    }
  }
</script>