我对Tiptap有点陌生。我想使用来自另一个组件(FormComponent)的textarea元素,而不是使用content属性(编辑器选项)。这可能吗?
const TiptapEditor = () => {
const editor = useEditor({
element: document.getElementById('description'), // It didn't work.
extensions: [StarterKit],
content: 'Hello World! 🌎️', // I don't want this
})
return <EditorContent editor={editor} />
}
export default TiptapEditor
textarea元素所在的另一个组件。
const FormComponent = () => {
const {
register,
handleSubmit,
watch,
formState: { errors, isSubmitting, isSubmitted, isDirty, isValid },
} = useForm<ExampleType>({
mode: 'onChange',
resolver: zodResolver(ExampleSchema),
defaultValues: {
description: '',
},
})
return (
<form onSubmit={handleSubmit(submit)} noValidate>
<TiptapEditor /> // obviously, this does not work at the moment.
<textarea
id="description" // I want to use this textarea so that I don't have to add another styling.
placeholder={DESCRIPTION_PLACEHOLDER}
{...register('description')}
/>
<button></button>
</form>
)
}
我找不到与此问题相关的示例或文档。有什么想法吗?
1条答案
按热度按时间qcuzuvrc1#
您能否详细说明不想使用内容字段的原因?
我在窗体中使用Tippap,带有react钩子窗体。我不使用register,而是使用controller:
内容字段只是用作初始值,编辑器将处理状态,我只是将更改反馈到表单。
如果你能分享更多的信息,为什么内容字段是你的问题,我可以尝试扩大我的答案。