首页 > 解决方案 > 如何在 `proseMirror` 编辑器中使用`react-hook-form`?

问题描述

我如何react-hook-form与编辑器一起使用proseMirror

react-hook-form以下是我尝试整合proseMirror

import {EditorState} from "prosemirror-state"
import {EditorView} from "prosemirror-view"
import {Schema, DOMParser} from "prosemirror-model"
import {schema} from "prosemirror-schema-basic"
import {addListNodes} from "prosemirror-schema-list"
import {exampleSetup} from "prosemirror-example-setup"

import { useForm } from "react-hook-form";

function Page() {

    const { register, handleSubmit } = useForm();
    const onSubmit = data => console.log(data);

    return (
        <form onSubmit={handleSubmit(onSubmit)}>
    
            <div style={}>
        
                <div>
        
                    <label className="c-label-block">Message</label>
        
                    <div id="editor" {...register("editor")}></div>
                    <div id="content"></div>
        
                </div>
        
            </div>
       
        
            <div className="c-btn-group c-btn c-btn-primary c-btn--medium" onClick={handleSubmit(onSubmit)}>
                <div tabIndex={0}>Submit</div>
            </div>
        
    
        </form>
    );
    
}

但是当我单击submit按钮时,我得到:

Unhandled Runtime Error
TypeError: Cannot read property 'split' of undefined at get (index.esm.js:28)

似乎react-hook-form无法检索编辑器value内部proseMirror,如何从proseMirror编辑器中检索输入值?

标签: reactjsreact-hook-formprose-mirror

解决方案


推荐阅读