vue.js - Handle paste event in vue2-editor

Question

I'm using this text editor https://github.com/davidroyer/vue2-editor that is based on Quilljs

I want to handle the paste event so it pastes only the plain text without any format but seems in the documentation that paste is not a supported event by default.

Is there any way to add the paste event?

I've already tried using v-on:paste in the Editor and adding the Quill custom module Clipboard but haven't had any success.

Answer 1

As I didn't find a way of doing it with the library I did it with the DOM

onPaste() {
  const x = document.getElementById("removePasteFormat");
  console.log(x);
  x.addEventListener("paste", (e) => {
    e.stopPropagation();
    e.preventDefault();
    let text = e.clipboardData.getData("text/plain");
    // access the clipboard using the api
    if (document.queryCommandSupported("insertText")) {
      document.execCommand("insertText", false, text);
    } else {
      document.execCommand("paste", false, text);
    }
  });
},

Added the id to the div containing the text editors like this:

<div id="removePasteFormat"> *<<Here goes the text editor component>>* </div>

And register the method on mounted()

mounted() {
    this.onPaste();
},