Use vue-quill-editor (rich text box) to disable pasting images

Problem description: Copy and paste in the rich text box does not go through the upload image interface, and the copied image will be parsed into base64 encoding. In order to control this situation, you can choose to disable pasting images, or monitor the copied and pasted images and go through the upload image interface.

1. obtains the quill object through refs or Quill of the object getInstance() method to obtain.

2. Register paste event processing function, obtain the content in the clipboard through the clipboardData attribute of the event object, determine whether the image exists, and block it if it exists Default behavior.

3. Finally, you need to remember to cancel the event handler when the component is destroyed.

<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>