在vue2编辑器中处理粘贴事件

cdmah0mi  于 2023-01-26  发布在  Vue.js
关注(0)|答案(3)|浏览(296)

我使用的是基于Quilljs的文本编辑器https://github.com/davidroyer/vue2-editor
我想处理paste事件,使其只粘贴没有任何格式的纯文本,但在文档中似乎不支持默认情况下的paste事件。

是否可以添加粘贴事件?

我已经尝试过在编辑器中使用v-on:paste并添加Quill定制模块Clipboard,但没有任何成功。

2wnc66cl

2wnc66cl1#

因为我没有找到一种方法来使用库,所以我使用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();
},
9cbw7uwe

9cbw7uwe2#

我认为做一个插件会很好。
我让它变得简单。
src/utils/vue 2插件/剪贴板.ts

import Delta from 'quill/node_modules/quill-delta';
import Clipboard from 'quill/modules/clipboard';
import { Quill } from 'vue2-editor';

export class CustomClipboardPlugin extends Clipboard {
  public quill!: Quill;
  public options: any = {};
  constructor(quill: Quill) {
    super(quill, {
      matchers: [],
    });
    this.quill = quill;
    this.quill.root.addEventListener('paste', this.onPaste.bind(this), true);
  }

  onPaste(event: ClipboardEvent) {
    event.preventDefault();
    event.stopPropagation();
    const range = this.quill.getSelection(true);
    if (range === null) return;

    let _textHtml;
    if (event.clipboardData?.getData('text/html')) {
      _textHtml = event.clipboardData?.getData('text/html');
    } else if (event.clipboardData?.getData('text/plain')) {
      _textHtml = `<p>${event.clipboardData?.getData('text/plain')}</p>`;
    }
    if (_textHtml) {
      const pastedDelta = this.quill.clipboard.convert(_textHtml);
      const delta = new Delta()
        .retain(range.index)
        .delete(range.length)
        .concat(pastedDelta);
      this.quill.updateContents(delta, Quill.sources.USER);
      this.quill.setSelection(delta.length() - range.length, 0, Quill.sources.SILENT);
    }
  }
}

vue文件

<template>
...
<VueEditor
  ...
  :custom-modules="customModulesForEditor"
  ...
/>
...
</template>

// script
import CustomClipboardPlugin fro 'src/utils/vue2Plugin/clipboard.ts';

...
data() {
  return {
        customModulesForEditor: [{ alias: 'clipboard', module: CustomClipboardPlugin }],
  };
},
...
au9on6nz

au9on6nz3#

我想知道同样的,并提出了以下解决方案。
1 -使用:editorOptions选项referenced here

<template>
  VueEditor(:editorOptions="editorSettings")
</template>

2 -使用此处描述的选项填充模块。剪贴板模块
3 -然后你可以用你的个人函数来处理粘贴(在quill的matcher之后应用)。

<script>
  data() {
    return {
      editorSettings: {
        modules: {
          clipboard: {
            matchers: [[Node.ELEMENT_NODE, this.customQuillClipboardMatcher]]
          }
        }
      }
    }
  },

  methods: {
    customQuillClipboardMatcher(node, delta) {
      delta.ops = delta.ops.map((op) => {
        return {
          insert: op.insert
        }
      })
      return delta
    },
  }
</script>

相关问题