使用vue-quill-editor(富文本框)禁用粘贴图片

问题描述:富文本框复制粘贴未走上传图片接口,会将复制的图片解析为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>

猜你喜欢

转载自blog.csdn.net/m0_64550837/article/details/134874502