I am using TinyMCE markdown editor with react Hook Form inside NextJS typescript project. TinyMCE works fine if I am using it without react-hook-form.
I am getting issues while using it with react-hook-form.
I can see editorRef.current.getContent() Html data output. But data output is empty object.
Any ideas what might be wrong here?
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>
</>
);
}I've had success using RHF Controller wrapper (v7.25) around tinyMCE Editor (v5.10) if that helps