是否有可能在TipTap中有一个完整的自定义renderHTML函数?

Question

目前的格式是这样的:

renderHTML({ HTMLAttributes }) {
return ['img', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes)];
},

现在我可以这样做吗:

renderHTML({ HTMLAttributes }) {
return <div>hello</div>;
},

更新为addNodeView:

现在我有一个customimage。js:

const CustomImage = Image.extend({
addNodeView() {
return ReactNodeViewRenderer(NextImage);
},
});
export default CustomImage;

和NextImage是:

const NextImage = () => {
return (
<NodeViewWrapper>
<div>hello</div>
</NodeViewWrapper>
);
};
export default NextImage;

我这样使用它:

html = generateHTML(JSON.parse(text), [
CustomImage
....

Answer 1

运行editor.getHTML()时调用renderHtml函数

回答你的问题，据我所知，它需要匹配他们的格式。要达到你想要的效果，你可以这样做:

renderHTML({ HTMLAttributes }) {
// On output
return [
"div",
mergeAttributes(HTMLAttributes), // mergeAttributes is a exported function from @tiptap/core
"hello",
];
},

另一方面，如果你想在编辑器中渲染它，你应该使用:

addNodeView() {
return ReactNodeViewRenderer(YourComponentHere);
},

你可以显示任何你想要的组件:

import { NodeViewWrapper } from "@tiptap/react";
import React from "react";
const YourComponentHere = ({ node, updateAttributes, selected, editor }) => {
return (
<NodeViewWrapper>
<div>hello</div>
</NodeViewWrapper>
);
};

编辑:假设你正在使用react，如果你想使用tiptap编辑器，你应该使用useEditor。

import { useEditor, EditorContent } from '@tiptap/react'
import StarterKit from '@tiptap/starter-kit'
import CustomImage from './CustomImage'
const Tiptap = () => {
const editor = useEditor({
extensions: [
StarterKit,
CustomImage
],
content: '<p>Your inital content here</p>',
})
return (
<EditorContent editor={editor} />
)
}
export default Tiptap

https://tiptap.dev/installation/react