tinymce is not working with react hook form

Question

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

rusty · Accepted Answer · 2022-03-11 06:58:45Z

3

I've had success using RHF Controller wrapper (v7.25) around tinyMCE Editor (v5.10) if that helps

answered Mar 11, 2022 at 6:58

rusty

311 bronze badge

Sign up to request clarification or add additional context in comments.

Comments

malatasf · Accepted Answer · 2024-06-02 21:33:27Z

As Mentioned above using the Controller Wrapper works ok. Im able to successfully use tinymce and react-hook-form like the following:

<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, }"
          }}
        />
      )}/>

Ensure you supply the onEditorChange with the onChange function from the controller and you should be good to go

Collectives™ on Stack Overflow

tinymce is not working with react hook form

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related