next.js 如何在TipTap编辑器中使用React Hook窗体

4si2a6ki 于 2022-12-03 发布在 React

关注(0)|答案(1)|浏览(233)

我使用react hook表单输入文本，如下所示

<div className='mb-4'>
                                <label htmlFor='desc'>Description</label>
                                <TipTap 
                                
                                // iwant to pass the  ...regiseter props here
                                
                                />

                                <textarea
                                    className='w-full'
                                    id='desc'
                                    autoFocus
                                    {...register('desc', {
                                        required: 'Please enter description',
                                    })}
                                />
                                {errors.desc && (
                                    <div className='text-red-500'>{errors.desc.message}</div>
                                )}
                            </div>

这是我的Tiptap组件

const TipTap = () => {
    const tipTapEditor = useEditor({
        extensions: [StarterKit],
        content: ``,
        onUpdate: ({ editor }: any) => {
            const html = editor.getHTML();
            console.log(html);
        },
    });

    return (
        <div>
            <MenuBar editor={tipTapEditor} />
            <EditorContent editor={tipTapEditor} />
        </div>
    );
};

我想使用Tiptap编辑器如何将{... register}作为道具传递给TitaTap组件

next.js

来源：https://stackoverflow.com/questions/74618638/how-to-use-react-hook-form-with-tiptap-editor

1条答案

按热度按时间

uqzxnwby1#

我建议使用组件或来自RHF的useController挂钩。

const DocumentController: React.FC<DocumentControllerProps> = ({
  name,
  required = false,
  readOnly = false,
}) => {
  const {
    field: { onChange, value, ref },
  } = useController({
    name,
    rules: { required },
  });
  return (
    <TipTapComponent
      initialValue={value}
      readOnly={readOnly}
      onChange={onChange}
    />
  );
};

在tiptap组件中，

const TipTap = ({ initialValue, onChange }) => {
  const tipTapEditor = useEditor({
    extensions: [StarterKit],
    content: initialValue,
    onUpdate: ({ editor }) => {
      const html = editor.getHTML();
      onChange(html);
    },
  });

  return (
    <div>
      <MenuBar editor={tipTapEditor} />
      <EditorContent editor={tipTapEditor} />
    </div>
  );
};

赞(0）回复(0）举报 2022-12-03

我来回答

next.js 如何在TipTap编辑器中使用React Hook窗体

1条答案

相关问题

热门标签

最新问答