element-ui vue-quill-editor 富文本编辑框自定义图片插入

前言

---

因为用户需要编辑自定义页面，这里就要用到富文本编辑框，可以插入图片插入视频。我选择了vue-quill-editor。然后问题来了，现实需求和引入的框架冲突。

问题引入

---

vue-quill-editor默认的图片插入方式，是直接将图片转成base64编码，这样的结果是整个富文本的html片段十分冗余。我们的服务器端接收的post的数据大小都是有限制的，这样的话导致提交失败，就算不提交失败，大量的数据存入数据库也不是好事。为了解决这个问题，我考虑了两个方案，换一个富文本编辑框框架，另一个是修改vue-quill-editor的框架代码。
百度一番，果断开始尝试修改框架代码框架，因为换个富文本编辑框有太多不确定性，增加测试成本。

解决方式

如上图，我们点击图片，不是把图片的base64编码插入富文本框，而是将本地文件上传到我的文件上传地址（我这里默认提供post方式上传图片，并且返回图片地址），将图片以html方式插入在富文本框内。这样由原来的图片数据优化为了<img src="...">的html格式数据。

改造过程

---

template部分

<el-form-item label="课程详情">
  <!-- 图片上传组件辅助-->
  <el-upload
      class="avatar-uploader quill-img"
      action="上传图片的url地址"
      :show-file-list="false"
      :on-success="quillImgSuccess"
      :before-upload="beforeImgUpload">
  </el-upload>
  <!--富文本编辑器组件-->
  <quill-editor 
      v-model="form.content"
      ref="myQuillEditor"
      :options="editorOption"></quill-editor>
</el-form-item>

vue data部分

editorOption: {
    placeholder: '',
    theme: 'snow',  // or 'bubble'
    modules: {
    toolbar: {
        container: toolbarOptions,  // 工具栏
        handlers: {
        'image': function (value) {
          if (value) {
            // 触发input框选择图片文件
            document.querySelector('.quill-img input').click()
          } else {
            this.quill.format('image', false);
          }
        }
        }
    }
    }
},

toolbarOptions自定义工具栏

// 工具栏配置
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': []}],
    ['link', 'image', 'video'],
    ['clean']                                         // remove formatting button
]

vue method部分:

quillImgSuccess(res, file) { // 富文本编辑框图片上传
  // console.log(URL.createObjectURL(file.raw));
  // this.form.icon = URL.createObjectURL(file.raw);
  // res为图片服务器返回的数据
  // 获取富文本组件实例
  let quill = this.$refs.myQuillEditor.quill
  // 如果上传成功
  if (res.errno == '0') {
      // 获取光标所在位置
      let length = quill.getSelection().index;
      // 插入图片  res.data为服务器返回的图片地址
      quill.insertEmbed(length, 'image', res.data)
      // 调整光标到最后
      quill.setSelection(length + 1)
  } else {
      this.$message.error('图片插入失败')
  }
},

参考

---

vue-quill-editor自定义图片上传
改造vue-quill-editor：实现图片上传到服务器再插入富文本
配合 element-ui 实现上传图片/视频到七牛

尾记

---

写得比较急，可能代码不够兼容，有问题直接在下方留言。