带有这种格式的粘贴内容的羽毛笔中的 OnPaste 问题 <!--StartFragment-->

编程问答 2022-05-23

问题描述

我在 quill 编辑器中使用 onPaste 函数。但是每当我尝试粘贴一些文本时，文本都会按照以下格式开始。如何将它们显示为复制自的相同内容？

以下是我用来获取 html/text 或纯文本/文本的代码

import quill from 'quill'
const Clipboard = quill.import('modules/clipboard')
const Delta = quill.import('delta')

class PlainClipboard extends Clipboard {
   onPaste(e) {
    e.preventDefault()
    this.quill.focus();
    const range = this.quill.getSelection()
    const text = e.clipboardData.types.find(type => type == "text/html") == "text/html" ? e.clipboardData.getData('text/html') 
                : e.clipboardData.types.find(type=>type == "text/rtf") == "text/rtf" ? e.clipboardData.getData('text/html') 
                : e.clipboardData.getData('text/plain');
    const delta = new Delta()
      .retain(range.index)
      .delete(range.length)
      .insert(text)
    const index = text.length + range.index
    const length = 0
    this.quill.updateContents(delta,'silent')
    this.quill.setSelection(index,length,'silent')
    this.quill.scrollIntoView()
}

阅读突出显示的“测试”内容被复制和粘贴，但不是像以前那样显示，而是显示了 html 代码。

enter image description here

解决方法

如果我理解正确，这个剪贴板的重点是将内容粘贴为纯文本？

您的问题是您直接检索 text/html 剪贴板条目并插入它，这始终是原始 HTML（这就是其中的 whole point）。

修复当前解决方案的方法是只要求 text/plain，它会给你你想要的纯文本：

const text = e.clipboardData.getData('text/plain');

话虽如此，我实际上会采用完全不同的方法。如果可以避免，我不建议重写 Clipboard 模块。相反，您应该使用 Quill 公开的 API，并使用 clipboard matchers，这样您就可以响应剪贴板并以这种方式修改 Delta。

例如，这个匹配器将通过简单地从操作中去除 attributes 属性来去除任何粘贴的所有格式：

quill.clipboard.addMatcher(Node.ELEMENT_NODE,(node,delta) => {
  const ops = delta.ops.map((op) => ({insert: op.insert}));
  return new Delta(ops)
})

工作示例 here。

clipboardclipboardcopy-pasteeditoreditorquill