reactjs - TinyMCE React content in empty in custom button

Question

In my tinyMCE custom button, the editor content is always empty.

import React, { useEffect, useState } from "react";
import { Editor } from '@tinymce/tinymce-react';

const TINYMCEKEY = 'MY_SECRET_KEY';

const MyForm = () => {
   const [ editorContent, setEditorContent ] = useState("");

   useEffect(() => {
      const text = "This is a Test";
      setEditorContent(text);
   });

   const handleEditorChange = (content) => {
      setEditorContent(content);
   }

   return (
      <>
         <Editor
            apiKey={TINYMCEKEY}
            value={editorContent}
            init={{
               height: 600,
               menubar: false,
               branding: false,
               plugins: [
                  "print"
               ],
               setup: function (editor) {
                  editor.ui.registry.addButton('testBTN', {
                     text: "My Button",
                     onAction: function () {
                        console.log(editorContent); // It's always empty
                     }
                  });
               },
               toolbar1: "print | testBTN"
            }}
            onEditorChange={handleEditorChange}
         />
      </>
   );
}

export default MyForm;

question from:https://stackoverflow.com/questions/66054494/tinymce-react-content-in-empty-in-custom-button

Answer 1

I was able to get it to work by using a ref.

const MyForm = () => {
  const [editorContent, setEditorContent] = useState("");
  const editor = useRef(null);

  const onButtonClick = () => {
    setEditorContent(editor.current.props.value);
  };

  const handleEditorChange = (content) => {
    setEditorContent(content);
  };

  return (
    <>
      <Editor
        ref={editor}
        apiKey={TINYMCEKEY}
        value={editorContent}
        init={{
          height: 600,
          menubar: false,
          branding: false,
          plugins: ["print"],
          setup: function (editor) {
            editor.ui.registry.addButton("testBTN", {
              text: "My Button",
              onAction: onButtonClick
            });
          },
          toolbar1: "print | testBTN"
        }}
        onEditorChange={handleEditorChange}
      />
    </>
  );
};

So the idea is to pass a ref to the Editor and to retrieve the current content text value using this ref. You can then save it in state or do whatever you want with it.