当我试着做一个博客,我不能通过编辑的形式。我发现这个:
DraftJS React-Hook-Form - submitting Editor as input
但是LexicalRichTextEditor似乎没有这样的标签可以传递。有人能帮助我吗?我如何传递属性来实现添加内容和修改内容功能?
type LexicalEditorProps = {
//config: Parameters<typeof LexicalComposer>["0"]["initialConfig"];
content: any;
};
export default function MyEditor(props: LexicalEditorProps) {
const [ editor ] = useLexicalComposerContext();
const editorStateRef = useRef();
const [saveContent, setSaveContent] = useState('');
const editorConfig: any = {
// The editor theme
theme: EditorTheme,
// Handling of errors during update
onError(error: any) {
throw error;
},
editorState: props.content,
// Any custom nodes go here
nodes: [
HeadingNode,
ListNode,
ListItemNode,
QuoteNode,
CodeNode,
CodeHighlightNode,
TableNode,
TableCellNode,
TableRowNode,
AutoLinkNode,
LinkNode
]
};
useEffect(()=>{
if(editorStateRef.current){
setSaveContent(JSON.stringify(editorStateRef.current));
}
editor.update(()=>{
const root = $getRoot();
const selection = $getSelection();
const paragraphNode = $createParagraphNode();
const textNode = $createTextNode(saveContent);
paragraphNode.append(textNode);
root.append(paragraphNode);
});
},[saveContent]);
return (
<LexicalComposer initialConfig={editorConfig}>
<div className="editor-container">
<ToolbarPlugin />
<div className="editor-inner">
<RichTextPlugin
contentEditable={<ContentEditable className="editor-input" />}
placeholder={<Placeholder />}
ErrorBoundary={LexicalErrorBoundary}
/>
<OnChangePlugin onChange={(editorState:any) => editorStateRef.current = editorState} />
<HistoryPlugin />
<AutoFocusPlugin />
<CodeHighlightPlugin />
<ListPlugin />
<LinkPlugin />
<AutoLinkPlugin />
<ListMaxIndentLevelPlugin maxDepth={7} />
<MarkdownShortcutPlugin transformers={TRANSFORMERS} />
</div>
</div>
</LexicalComposer>
);
}
export function MyForm(){
const {register, handleSubmit, control, formState: {errors}} = useForm();
const onSubmit = ( data:any) => {
console.log(data);
};
return (
<form onSubmit={handleSubmit(onSubmit)}>
<Stack spacing={2}>
<Card>
<Controller control={control} name="content" render={()=> (
<MyEditor content={dataSet.content} />
)} />
</Card>
<Box>
<Button variant="contained" type="submit">Save</Button>
</Box>
</Stack>
</form>
);
}
字符串
2条答案
按热度按时间kr98yfug1#
我得到了解决方案,但这不是我做的,这是伟大的其他人谁帮助我的问题,并希望将帮助其他人。
UPDATE:删除if(editorRef.current!== undefined)语句,只将字段内容追加到数据
字符串
MyEditor.tsx
型
rkttyhzu2#
不漂亮,但它的工作很好,在这种情况下,我需要同时存储editorState(以便能够在保存在数据库中后编辑字段)和HTML中的内容本身
字符串
属性
value
和onChange
的用法如下的数据