@tinymce/tinymce-react - 如何在代码中更改焦点？

Question

我尝试通过按下按钮来聚焦 TinyMCE 文本编辑器，不幸的是 auto_focus 它不起作用。我的 TinyMCE 组件使用：

<Editor
        apiKey='*************'
        onInit={(evt, editor) => editorRef.current = editor}
        init={{
          height: 500,
          width: "100%",
          auto_focus: isInFocus, // not working
          menubar: false,
          inline: true,
          plugins: [

          ],
          toolbar: 'bold italic underline | undo redo | alignleft aligncenter ' +
          'alignright alignjustify',
          content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
        }}
      />

网上的解决方案不谈包npm @tinymce/tinymce-react。感谢各位帮手

Answer 1

我自己很快就找到了解决方案：我使用了 useEffect 钩子和 editorRef.current.focus() 函数：

export default function TinymceInlineEditor({isInFocus}) {
  const editorRef = useRef(null);

  useEffect(() => {
      isInFocus ? editorRef.current.focus() : null;
    }, [isInFocus]);

  return (
      <Editor
        apiKey='************'
        onInit={(evt, editor) => editorRef.current = editor}
        onBlur={(e) => handelBlur(editorRef)}
        init={{
          height: 500,
          width: "100%",
          menubar: false,
          inline: true,
          plugins: [

          ],
          toolbar: 'bold italic underline | undo redo | alignleft aligncenter ' +
          'alignright alignjustify',
          content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
        }}
      />
  );
}

@tinymce/tinymce-react - 如何在代码中更改焦点？

@tinymce/tinymce-react - How do I change in code the focus?

reactjs

tinymce