tinymce 不适用于反应钩子形式

Question

我在 NextJS typescript 项目中使用 TinyMCE markdown 编辑器和 React Hook Form。如果我在没有

react-hook-form

的情况下使用 TinyMCE，效果很好。

我在与

react-hook-form

一起使用时遇到问题。 我可以看到

editorRef.current.getContent()

Html数据输出。但是

data

输出是空对象。

你知道这里可能出了什么问题吗？

import { useRef } from 'react';
import { Editor } from '@tinymce/tinymce-react';
import { useForm } from 'react-hook-form';

export default function App() {
  const editorRef = useRef<any>(null);
  const { register, handleSubmit } = useForm();  

  const submitData = (data) => {
    if (editorRef.current) {
      console.log(editorRef.current.getContent());
    }
    console.log(data);
  };
  
  return (
    <>
      <form onSubmit={handleSubmit(submitData)}>
        <Editor
          onInit={(evt, editor) => (editorRef.current = editor)}
          initialValue=""
          init={{
            height: 500,
            menubar: false,
            plugins: [
              'advlist autolink lists link image charmap print preview anchor',
              'searchreplace visualblocks code fullscreen',
              'insertdatetime media table paste code help wordcount',
            ]
          }}
        />
        <input type="submit" />
      </form>
    </>
  );
}

Answer 1

我已经成功地在tinyMCE编辑器（v5.10）周围使用RHF控制器包装器（v7.25），如果有帮助的话

Answer 2

如上所述，使用控制器包装器可以正常工作。我能够成功使用tinymce和react-hook-form，如下所示：

<Controller
      control={control} name={name}
      render={({field, field:{ onChange}}) => (
        <Editor
          id={name}
          textareaName="content"
          ref={field.ref}
          apiKey={process.env.NEXT_PUBLIC_TINYMCE_API_KEY}
          onEditorChange={onChange}
          init={{
            height: 200,
            menubar: false,
            plugins: [],
            toolbar:
              "undo redo | formatselect | " +
              "bold italic backcolor | alignleft aligncenter " +
              "alignright alignjustify | bullist numlist outdent indent | " +
              "removeformat | help",
            "content_style":
              "body { font-family:Helvetica,Arial,sans-serif; font-size:14px, }"
          }}
        />
      )}/>

确保为 onEditorChange 提供来自控制器的 onChange 函数，这样就可以开始了