检测 TinyMCE 文本编辑器何时准备就绪（初始化后）答案

【问题标题】：Detect when the TinyMCE text editor is ready(after initialization)检测 TinyMCE 文本编辑器何时准备就绪（初始化后）
【发布时间】：2022-12-04 06:36:19
【问题描述】：

由于加载 tinyMCE 文本编辑器需要一些时间，我使用使用效果,使用参考钩子来检测文本编辑器何时准备就绪，并且可能会更新状态以呈现编辑器而不是微调器。然而，使用效果即使在初始化之后也不会被调用（编辑器Ref.current正在监视）。这种方法有什么问题吗？

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

export default function App() {
  const editorRef = useRef(null);
  useEffect(() => {
    console.log("editor is ready")
  }, [editorRef.current]);
  return (
    <>
      <Editor
        onInit={(evt, editor) => (editorRef.current = editor)}
        initialValue="<p>This is the initial content of the editor.</p>"
        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",
          ],
          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 }",
        }}
      />
    </>
  );
}

【问题讨论】：

标签： reactjs tinymce

【解决方案1】：

您可以尝试创建一个状态来存储从 onInit 方法参数获取的编辑器对象。

将此状态设置为 useEffect 挂钩中的依赖项。

在 onInit 方法中，调用 setState 挂钩。

请参阅下面的提取代码：

const [editor, setEditor] = useState(null);

useEffect(() => {
    console.log(editor);
}, [editor]);

return (
    <Editor
        onInit={(evt, editor) => {
            setEditor(editor);
            editorRef.current = editor;
        }}
    />
);

【讨论】：