在 vue2-editor 中处理粘贴事件

Question

我正在使用基于 Quilljs

的文本编辑器https://github.com/davidroyer/vue2-editor

我想处理粘贴事件，因此它只粘贴没有任何格式的纯文本，但在文档中似乎默认情况下不支持粘贴事件。

有没有办法添加粘贴事件？

我已经尝试在编辑器中使用 v-on:paste 并添加 Quill 自定义模块剪贴板，但没有任何成功。

Answer 1

因为我没有找到使用库的方法，所以我使用 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);
    }
  });
},

将 id 添加到 div 中，其中包含这样的文本编辑器：

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

并在 mounted() 上注册方法

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

在 vue2-editor 中处理粘贴事件

Handle paste event in vue2-editor

vue.js

wysiwyg

paste

quill