vue-quill-editor富文本图片lrz压缩

安装vue-quill-editor

npm install vue-quill-editor --save

安装lrz压缩插件

npm install lrz --save-dev

tmplete

 <quill-editor ref="myQuillEditor" v-model="form.newsContent" :options="editorOption"></quill-editor>
 // input替代富文本上传图片功能
 <input class="quill-img" type="file" @change="postFile($event)" style="display: none;" />
        

js

引入

import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';
import { quillEditor } from 'vue-quill-editor';
// 引入压缩插件
import lrz from "lrz";

data配置

// 富文本配置
      editorOption: {
        placeholder: "请在这里输入",
        modules: {
          toolbar: {
            container: [
              ["bold", "italic", "underline", "strike"], //加粗，斜体，下划线，删除线
              ["blockquote", "code-block"], //引用，代码块
              [{ header: 1 }, { header: 2 }], // 标题，键值对的形式；1、2表示字体大小
              [{ list: "ordered" }, { list: "bullet" }], //列表
              [{ script: "sub" }, { script: "super" }], // 上下标
              [{ indent: "-1" }, { indent: "+1" }], // 缩进
              [{ direction: "rtl" }], // 文本方向
              [{ size: ["small", false, "large", "huge"] }], // 字体大小
              [{ header: [1, 2, 3, 4, 5, 6, false] }], //几级标题
              [{ color: [] }, { background: [] }], // 字体颜色，字体背景颜色
              [{ font: [] }], //字体
              [{ align: [] }], //对齐方式
              ["clean"], //清除字体样式
              ["image", "video"], //上传图片、上传视频
            ],
            handlers: {
              image: function (value) {
                if (value) {
                  // 触发input框选择图片文件，并执行默认点击事件。
                  document.querySelector(".quill-img").click();
                } else {
                  this.quill.format("image", false);
                }
              },
            },
          },
        },
      },

压缩方法

 // 压缩图片
    postFile(e) {
      let _this = this;
      let file = e.target.files[0];
      // this.files[0] 是用户选择的文件
      lrz(file, { width: 1024 }).then(function (rst) {
        var img = new Image();
        img.src = rst.base64;
        let quill = _this.$refs.myQuillEditor.quill;  //获取富文本编辑器的编辑框
        quill.focus();     //聚焦在上面
        console.log('quill.getSelection().index', quill.getSelection().index)
        quill.insertEmbed(quill.getSelection().index, "image", img.src);
        //调用富文本编辑器的image上传图片功能，将压缩后的图片传入。
        return rst;
      });
    },