【Vue】Quill Editor自定义组件

矫情吗；* 2022-01-06 11:29 577阅读 0赞

最近小编在做案例展示，在富文本编辑器这里花了不少时间，还好有前端大哥帮忙，这才拨开云雾见月明。  
对于图文信息，有多种编辑器，我选用的是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)/~