粘贴纯文本时如何更改tiptap 的行为？答案

【问题标题】：How can I change the behavior of tiptap when pasting plain text?粘贴纯文本时如何更改tiptap 的行为？
【发布时间】：2021-08-24 06:59:23
【问题描述】：

我目前正在尝试使用名为 tiptap 的库来实现可视化编辑器。

https://v1.tiptap.dev/

我认为 v2 是最常见的tiptap，但在某些情况下必须使用 v1。

但是，我对将纯文本粘贴到tiptap时的行为并不满意，当我查看它时，我发现库prosemirror中设置的条件与我的预期不同。

https://github.com/ProseMirror/prosemirror-view/blob/master/src/clipboard.js#L57-L59

text.trim().split(/(?:\r\n?|\n)+/).forEach(block => {
 dom.appendChild(document.createElement("p")).appendChild(serializer.serializeNode(schema.text(block, marks)))
})

prosemirror 似乎将单个换行符转换为。我想更改条件，如果有一个换行符，它转换为 ，如果有两个换行符，它转换为。但我不知道如何实现它，而且我过得很艰难。

editorProps: {
  clipboardTextParser(text, $context) {
    console.log(text)
    console.log($context)
    // :(
  }
}

我首先使用tiptap 的EditorProps 功能覆盖prosemirror 的clipboardTextParser 的整个处理过程。但是clipboardTextParser在prosemirror中使用了很多变量和对象，我不知道在editorProps中怎么写。我放弃了，因为我不知道该怎么做。

有没有办法解决这个问题？我在想，如果tiptap 可以做到和clipboardTextParser 几乎一样的事情，那应该没问题。

请原谅我蹩脚的英语。请帮帮我！

【问题讨论】：

标签： javascript vue.js tiptap prose-mirror

【解决方案1】：

你应该使用 transformPastedHTML

https://prosemirror.net/docs/ref/#view.EditorProps.transformPastedHTML

这将为您提供一个 html 节点，然后您可以像这样简单地更改输出：

private cleanHtmlHanlder (html: string): string {
  const elementHtml = document.createElement('br')
  elementHtml.innerHTML = html

  return elementHtml
}

希望对你有帮助

【讨论】：

谢谢，真的很有帮助！