在 vue2-editor 中处理粘贴事件

问题描述

我使用的是基于 quilljs 的文本编辑器 https://github.com/davidroyer/vue2-editor

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

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

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

解决方法

因为我没有找到用库来做这件事的方法，所以我用 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",text);
    }
  });
},

将 id 添加到包含文本编辑器的 div 中，如下所示：

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

并在mounted()上注册方法

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