[英]How can I change the behavior of tiptap when pasting plain text?
I'm currently trying to implement a visual editor using a library called tiptap.我目前正在尝试使用名为 tiptap 的库来实现可视化编辑器。
https://v1.tiptap.dev/ https://v1.tiptap.dev/
I think v2 is the most common tiptap, but there are circumstances where v1 must be used.我认为 v2 是最常见的提示,但在某些情况下必须使用 v1。
However, I was not satisfied with the behavior when I pasted plain text into tiptap, and when I looked into it, I found that the condition set in the library prosemirror was different from what I expected.但是,我对将纯文本粘贴到tiptap时的行为并不满意,当我查看时,发现库prosemirror中设置的条件与我预期的不同。
https://github.com/ProseMirror/prosemirror-view/blob/master/src/clipboard.js#L57-L59 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)))
})
It seems that prosemirror converts a single newline to <p></p>
.似乎 prosemirror 将单个换行符转换为
<p></p>
。 I would like to change the condition so that it converts to <br>
if there is one newline, and <p></p>
if there are two newlines.我想更改条件,以便在有一个换行符时转换为
<br>
如果有两个换行符则转换为<p></p>
。 But I don't know how to make it happen, and I'm having a very hard time.但我不知道如何实现它,而且我很难过。
editorProps: {
clipboardTextParser(text, $context) {
console.log(text)
console.log($context)
// :(
}
}
I started by using tiptap's EditorProps
feature to overwrite the entire processing of prosemirror's clipboardTextParser
.我首先使用 tiptap 的
EditorProps
功能来覆盖 prosemirror 的clipboardTextParser
的整个处理过程。 However, clipboardTextParser
uses a number of variables and objects in prosemirror, and I have no idea how to write them in editorProps.但是,
clipboardTextParser
在 prosemirror 中使用了许多变量和对象,我不知道如何在 editorProps 中编写它们。 And I gave up because I didn't know how to proceed.我放弃了,因为我不知道如何继续。
Is there any way to solve this?有没有办法解决这个问题? I'm thinking that if tiptap can do almost the same thing as
clipboardTextParser
, it should be fine.我在想,如果 tiptap 可以做与
clipboardTextParser
几乎相同的事情,那应该没问题。
Pardon my broken English.原谅我蹩脚的英语。 Please help me!
请帮我!
You should use transformPastedHTML你应该使用 transformPastedHTML
https://prosemirror.net/docs/ref/#view.EditorProps.transformPastedHTML https://prosemirror.net/docs/ref/#view.EditorProps.transformPastedHTML
That will give you a html node then you can simply change the output it like this:这会给你一个 html 节点,然后你可以像这样简单地改变输出:
private cleanHtmlHanlder (html: string): string {
const elementHtml = document.createElement('br')
elementHtml.innerHTML = html
return elementHtml
}
Hope it helps希望能帮助到你
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.