富文本编辑器vue-quill-editor

该富文本编辑器可用于留言板、备注、设置信息等功能；

在vue项目中安装vue-quill-editor

npm install vue-quill-editor --save

全局引入

import VueQuillEditor from ‘vue-quill-editor’；

import ‘quill/dist/quill.core.css’；

import ‘quill/dist/quill.snow.css’；

import ‘quill/dist/quill.bubble.css’；

Vue.use(VueQuillEditor)；

可以局部引入

import 'quill/dist/quill.core.css'；
import 'quill/dist/quill.snow.css'；
import 'quill/dist/quill.bubble.css'；
import { quillEditor } from 'vue-quill-editor'；

export default {
  components: {
    quillEditor
  }

}

编辑器editorOption的配置

// quill-editor的配置
editorOption: {
  modules: {
    clipboard: {
    // 粘贴版，处理粘贴时候带图片
      matchers: [[Node.ELEMENT_NODE, this.handleCustomMatcher]],
    },
    toolbar: {
      container: [
        ["bold", "italic", "underline", "strike"],
        ["blockquote", "code-block"],
        [{ header: 1 }, { header: 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"],
      ],
      handlers: {
        image: (value) => {
          if (value) {
          // 上传图片时调用input上传
            document.querySelector("#file").click();
          }
        },
      },
    },
  },
},

禁止粘贴图片

handleCustomMatcher(node, Delta) {
      // this.canPasteImg为true时表示可以粘贴图片；
      if (this.canPasteImg) return Delta;
      let ops = [];
      Delta.ops.forEach((op) => {
        // 如果粘贴了图片，op.insert会是一个对象，所以可以这样处理
        if (op.insert && typeof op.insert === "string") {
          ops.push({
            insert: op.insert,
          });
        } else {
          this.$message({
            message: "不允许粘贴图片,请手动上传",
            type: "warning",
          });
        }
      });
      Delta.ops = ops;
      return Delta;
},

编辑器上传图片加验证，利用input上传

/*
editorOption以下配置会触发input上传
handlers: {
    image: (value) => {
      if (value) {
      // 上传图片时调用input上传
        document.querySelector("#file").click();
      }
    },
  },
},
*/
btnUploadFile(event) {
      // 获取上传的图片
      var files = event.target.files[0];
      if (!files) return;
      // 清除input文本框的files对象内容
      document.getElementById('file').value = '';
      //创建FileReader对象实例reader
      const reader = new FileReader();
      //将图片url转换为base64码
      reader.readAsDataURL(files);
      reader.onload = (e) => {
        const result = e.target.result; //图片base64字符串
        const img = new Image();
        img.src = result;
        img.onload = () => {
          if (img.height > 600 || img.width > 600) {
            this.$message.error(`寸尺需要600*600`);
            return;
          }
          this.uploadSucceed(result);
        };
      };
},

// 验证通过的图片展示在编辑器里面
uploadSucceed(result) {
      // 获取富文本组件实例
      let quill = this.$refs[this.activeName][0].quill;
      // 获取光标所在位置
      let length = quill.getSelection().index;
      // 插入图片
      quill.insertEmbed(length, "image", result);
      // 调整光标到最后
      quill.setSelection(length + 1);
 }