在renderHTML中是否可能有一个完整的自定义TipTap函数？
在renderHTML中是否可能有一个完整的自定义TipTap函数？
提问于 2022-11-23 15:12:31
目前的格式如下：
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
....回答 1
Stack Overflow用户
回答已采纳
发布于 2022-11-23 15:57:41
运行renderHtml时调用editor.getHTML()函数
要回答你的问题，据我所知，它需要符合他们的格式。为了实现你想要的，你可以这样做：
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页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/74549035
复制相关文章
相似问题
腾讯云开发者
