【Vue】Quill Editor自定义组件

最近小编在做案例展示，在富文本编辑器这里花了不少时间，还好有前端大哥帮忙，这才拨开云雾见月明。
对于图文信息，有多种编辑器，我选用的是Quill Editor。对vue的使用还不熟练，在富文本编辑器这里遇到的问题主要是上传图片，我们要求的是限制图片最大宽度800px，大小不超过1M。
下面我们来说说富文本编辑器的引入和使用：
1、执行命令：npm install vue-quill-editor --save
2、引入quill editor，自定义图片上传

<!-- 图片上传组件辅助-->
<el-upload
  class="avatar-uploader-ui"
  :action="serverUrl"
  :headers="headers"
  name="file"
  accept="image/png,image/jpg,image/jpeg"
  :show-file-list="false"
  :on-success="uploadSuccess"
  :on-error="uploadError"
  :before-upload="beforeUpload">
</el-upload>
<el-form-item label="图文信息录入" v-loading="quillUpdateImg">
      <div class="edit_container">
        <span>建议上传图片宽度=800 px，图片大小不能大于1M</span>
        <quill-editor
                    v-model="dataForm.content"
                    ref="myQuillEditor"
                    class="editor"
                    :options="editorOption"
                    @ready="onEditorReady($event)">
        </quill-editor>
      </div>
 </el-form-item>

3、引入编辑器

import Vue from 'vue'
import { quillEditor } from 'vue-quill-editor' //调用编辑器
import "quill/dist/quill.snow.css"

editorOption: {
          placeholder: "请在这里输入",
          modules:{
                toolbar: {
                  // ['image']
                  container:[['image']],
                  handlers: {
                    'image': function (value) {
                      if (value) {
                        // 触发input框选择图片文件
                        document.querySelector('.avatar-uploader-ui input').click()
                      } else {
                        this.quill.format('image', false);
                      }
                    }
                  }
                }
                }
        }

4、beforeUpload方法中定义图片的大小和尺寸：

// 富文本图片上传前
beforeUpload(file) {
  const is1M = file.size / 1024 / 1024 < 1; // 限制小于1M
  if (!is1M) {
    this.$message.error('图片大小不可超过1MB')
    return Promise.reject(new throwError('图片大小不能超过1MB'));
  }

  return new Promise((resolve, reject) => {
    let width = 800; // 限制图片尺寸为800
    let _URL = window.URL || window.webkitURL;
    let img = new Image();
    img.onload =  () => {
      const valid = img.width === width;
      if (!valid) {
        this.$message.error('图片尺寸限制宽度为800px，大小不可超过1MB');
        return reject();
      }
      return resolve();
    }
    img.src = _URL.createObjectURL(file);
  });
}

5、editor中的图文消息，如果不对图片存储做处理，默认转成Base64二进制存库，二进制导致数据库的表宽，查询很慢，所以一般我们不这样存图片，我们放到图片服务器：

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

      // 富文本图片上传失败
      uploadError() {
        // loading动画消失
        this.quillUpdateImg = false
        this.$message.error('图片插入失败')
      }

存到数据库是这样的html：

<p>hbhbbnkjj</p><p><img src="https://test.oss-cn-beijing.aliyuncs.com/987eedff-b978-4c83-b94d-80a9b50e7cc0.png"></p><p>sdfsf</p>

总结：
自定义图片大小从网上查了很多，代码差不多，但是直接拿来不能用，这篇代码可以拿来参考，前端不简单那，(^o)/~