时间戳

首页 > 解决方案 > @tinymce/tinymce-react - 我如何改变代码的焦点？

reactjs - @tinymce/tinymce-react - 我如何改变代码的焦点？

问题描述

我尝试通过按下按钮来聚焦 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。感谢帮助者。

标签： reactjstinymce

解决方案

我自己很快找到了解决方案：我使用了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 }'
        }}
      />
  );
}

推荐阅读