vue-quill-editor支持图片缩放和粘贴图片过来的时候自动过滤

最新推荐文章于 2024-03-27 19:54:42 发布

前端同学

最新推荐文章于 2024-03-27 19:54:42 发布

阅读量256

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/weixin_44730897/article/details/132587377

版权

import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";


import imageResize from 'quill-image-resize-module'; // 图片缩放组件引用

import quillEditor, {
  Quill
} from "vue-quill-editor";
Quill.register('modules/imageResize ', imageResize); // 注册
Vue.use(quillEditor);


 <quill-editor ref="myTextEditor" class="ztyjDialog-ql-editor" v-model="form.content" :options="editorOption">
 </quill-editor>

this.editorOption = {
      modules: {
        toolbar: [
          ['image'], // 链接、图片、视频
        ],
        clipboard: {
          matchers: [[Node.ELEMENT_NODE, this.handleCustomMatcher]],
        },
        imageResize: {
          //放大缩小
          displayStyles: {
            backgroundColor: 'black',
            border: 'none',
            color: 'white',
          },
          modules: ['Resize', 'DisplaySize'],
        },
      },
      placeholder: '请输入正文',
};

 handleCustomMatcher(node, Delta) {
      let ops = [];
      Delta.ops.forEach(op => {
        if (op.insert && typeof op.insert === 'string') {
          ops.push({
            insert: op.insert,
            attributes: op.attributes, //文字样式（包括背景色和文字颜色等)
          });
        } else {
           if(op.insert&&op.insert.image&&op.insert.image.includes(';base64,')){
             ops.push(op)
          }
          // this.$message.warning("消息內容不支持圖片！");
        }
      });
      Delta.ops = ops;
      return Delta;
},