TinyMCE 'Error: No form element found' in React when using the Save plugin

Question

I am trying to figure out how the save plugin works in TinyMCE for React. I want the user to be able to click the save button and the content is saved to a database (code not included here) but anything I try I just keep getting the error Error: No form element found . For example, please consider this component:

const Component = () => {
  const [editorContent, setEditorContent] = useState('');

  const handleEditorInit = () => {
    setEditorContent(someInitialContent);
  }

  const handleEditorChange = (content, editor) => {
    setEditorContent(content);
    console.log(content); // correctly shows formatted content
  }

  const handleOnSubmit = (content, editor) => {
    console.log(content); // correctly shows formatted content
  }

  return (
    <Fragment>
      <Editor
        apiKey="api-key"
        id="my-editor"
        value={editorContent}
        init={{
          menubar: false,
          inline: true,
          plugins: [
            'advlist lists image charmap print preview anchor',
            'searchreplace visualblocks code fullscreen',
            'insertdatetime media table paste code help wordcount save'
          ],
          toolbar:
            'undo redo | bold italic underline backcolor forecolor | \
            removeformat | save'
        }}
        onEditorChange={handleEditorChange}
        onInit={handleEditorInit}
        onSubmit={handleOnSubmit} // doesn't get rid of the error
      />
    </Fragment>
  );
}

When the above component is rendered, the content is displayed in the editor and it can be formatted (bold/underline etc.) without any issues. The onInit , onEditorChange and onSubmit event handlers are working as expected (receiving the formatted content) but I still get the error no form element found when I click the save button on the toolbar.
I have tried wrapping the <Editor> component in a <form> tag and I have also tried using the onSaveContent event handler provided by TinyMCE but I still get the error. I don't understand why I keep getting the Error: no form element found error with or without a form element. I have looked everywhere for solutions but I can't seem to find one. Specially not one for React specifically. I have found similar issues here and here but I am still stuck on it and don't know how the solution fits into React.
Am I implementing it wrong or does anyone have any idea where I'm going wrong with my implementation?
Any help is greatly appreciated. Thank you in advance.

Answer 1

The save plugin is designed to submit the standard HTML form that contains the underlying TinyMCE <textarea> . If you are using React I would suspect that your form submission would be handled via some React-specific JavaScript and not a standard HTML form as a standard form submission would make the entire page refresh which is very much not how React or other SPA frameworks tend to operate.