TinyMCE 按键后反应光标返回开始

Question

我正在使用 TinyMCE-React，当我在 TinyMCE 编辑器中输入初始值的文本时，光标不断返回到文本的开头...

import { Editor } from "@tinymce/tinymce-react";

  const [formData, setFormData] = useState({
    title: "",
    text: "",
  });


if (post) {
  setFormData((formData) => ({
    ...formData,
    title: post.title,
    text: post.text,
  }));
}

const { title, text } = formData;

我的职能：

const textChange = (e) => {
setFormData({ ...formData.text, text: e });   };

我的编辑：

    <Editor
      name='text'
      initialValue={text}
      onEditorChange={(e) => textChange(e)}
    />

我认为这是因为“setFormData”，但我不知道如何使用停留在文本末尾的常规光标编辑文本...

Answer 1

迟到的答案，但这是解决方案：https://github.com/tinymce/tinymce-react/issues/267。

将

initialValue={text}

更改为

value={text}

。

这是使用 TinyMCE React 组件作为“受控”组件的正确设置：https://www.tiny.cloud/docs/integrations/react/#usingthetinymcereactcomponentasa受控组件。

Answer 2

对我来说，当我有两个单独的变量作为初始值和编辑器的更改时，它就起作用了。 参考：https://github.com/instruct-react/react-tinymce/issues/76

Answer 3

对我来说，它与 newValue 道具一起使用

<Editor
      apiKey="jeiltvbooyoyr3fe3xt511l45gkbcj9wrq1pj5hhpfrsqmua"
      onInit={(evt, editor) => (editorRef.current = editor)}
      newValue={content}
      onChange={() => setContent(editorRef.current.getContent())}
      automatic_uploads={false}
      init={{
        height: 500,
        menubar: true,
        branding: false,
        images_upload_url: `${API_BASE_URL}/file/storage/upload`,
        plugins: [
          "advlist",
          "autolink",
          "lists",
          "link",
          "image",
          "charmap",
          "preview",
          "anchor",
          "searchreplace",
          "visualblocks",
          "code",
          "fullscreen",
          "insertdatetime",
          "media",
          "table",
          "code",
          "help",
          "wordcount",
        ],
        toolbar:
          "undo redo | blocks | " +
          "bold italic forecolor | alignleft aligncenter " +
          "alignright alignjustify | bullist numlist outdent indent | " +
          "removeformat | help",
        content_style:
          "body { font-family:Helvetica,Arial,sans-serif; font-size:14px }",
      }}
    />