javascript - 粘贴纯文本时如何更改 tiptap 的行为？

Question

我目前正在尝试使用名为 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 似乎将单个换行符转换为 <p></p> .我想更改条件，使其转换为 <br>如果有一个换行符，并且<p></p>如果有两个换行符。但我不知道如何实现它，而且我很难过。

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

我开始使用 tiptap 的 EditorProps功能覆盖 prosemirror 的 clipboardTextParser 的整个处理过程.然而，clipboardTextParser在prosemirror中使用了很多变量和对象，不知道在editorProps中应该怎么写。我放弃了，因为我不知道如何继续。

有什么办法可以解决吗？我在想，如果 tiptap 可以做与 clipboardTextParser 几乎相同的事情的话，应该没问题。

请原谅我蹩脚的英语。请帮助我!

Answer 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
}

希望对你有帮助