1

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

https://v1.tiptap.dev/

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

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

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

似乎 prosemiror 将单个换行符转换为<p></p>. 我想更改条件，以便它转换为<br>是否有一个换行符，以及<p></p>是否有两个换行符。但我不知道如何做到这一点，而且我很难过。

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

我首先使用tiptap 的EditorProps功能覆盖prosemirror 的整个处理过程clipboardTextParser。但是，clipboardTextParserprosemiror 中使用了许多变量和对象，我不知道如何在 editorProps 中编写它们。我放弃了，因为我不知道如何继续。

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

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

4

1 回答 1

2

您应该使用 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
}

希望能帮助到你

于 2021-10-27T10:19:41.573 回答