如何在TipTap编辑器中使用窗体

Question

我有如下所示的使用react钩子形式的文本输入

        <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>

这是我的提示组件

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>
    );
};

我想使用提示编辑器如何将{...register}作为道具传递给TitaTap compenent

Answer 1

我建议使用来自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}
    />
  );
};

在你的提示组件中，

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>
  );
};