使用vue-quill-editor（富文本框）禁用粘贴图片

àì夳堔傛蜴生んèń 2024-02-05 13:14 40阅读 0赞

**问题描述：富文本框复制粘贴未走上传图片接口，会将复制的图片解析为base64编码，为了控制这种情况可选择禁用粘贴图片，或者监听有复制粘贴的图片走上传图片接口**

1.  获取到 `quill` 对象，可以通过 `refs` 或者 `Quill` 对象的 `getInstance()` 方法获取。
2.  注册 `paste` 事件处理函数，通过事件对象的 `clipboardData` 属性获取剪切板中的内容，判断是否存在图片，如果存在则阻止默认行为。
3.  最后在组件销毁时需要记得解除事件处理函数。

<template>
      <div>
        <quill-editor
          ref="editor"
          v-model="content"
          :options="{
            modules: {
              toolbar: [['bold', 'italic', 'underline', 'strike'], ['link', 'image', 'video']]
            },
            placeholder: '请输入内容...',
          }"
        ></quill-editor>
      </div>
    </template>
    
    <script>
    import { QuillEditor } from 'vue-quill-editor'; 
    
    export default {
      name: 'MyComponent',
      components: { QuillEditor },
      data() {
        return {
          content: '',
          quill: null
        };
      },
      mounted() {
        this.quill = this.$refs.editor.quill;
        this.quill.root.addEventListener('paste', this.handlePaste, false);
      },
      beforeDestroy() {
        this.quill.root.removeEventListener('paste', this.handlePaste, false);
      },
      methods: {
        handlePaste(e) {
          const clipboardData = e.clipboardData;
          const types = clipboardData.types;
          if (types.includes('Files')) {
            // 禁止粘贴图片
            e.preventDefault();
          }
        },
      },
    };
    </script>