时间戳

首页 > 解决方案 > 在 vue2-editor 中处理粘贴事件

vue.js - 在 vue2-editor 中处理粘贴事件

问题描述

我正在使用这个基于 Quilljs 的文本编辑器https://github.com/davidroyer/vue2-editor

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

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

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

标签： vue.jswysiwygpastequill

解决方案

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

推荐阅读