CODEWITHSUNDEEP
reactjsreact-hookstinymce
SanB
SanB

Reputation: 89

TinyMCE React cursor back to start after typing a key

I'm using TinyMCE-React and when I type my text in the TinyMCE Editor with an initial value, the cursor constantly returns at the start of the text...

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;

My function :

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

My Editor :

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

I think it's because of the "setFormData" but I don't know how can I edit the text with a regular cursor which stays at the end of the text...

Upvotes: 15

Views: 5289

Answers (5)

Manohar Lal
Manohar Lal

Reputation: 1

In my case:

onChange={(value) => setEditorState(value?.level?.content)}

To:

onEditorChange={(val) => setEditorState(val)}

Upvotes: 0

adil rehman
adil rehman

Reputation: 1

I found a solution that is you need to set onInit function when Tinymce load then this function hits and value will load in initialValue which is starting value when Tinymce loaded.

interface ITinyMCE {
 value: string
  setValue: (val: any) => void
}

export default function TinyMCE({ value, setValue }: ITinyMCE) {
  const [initialValue, setInitialValue] = useState<string>('')

  return (
    <Editor
      apiKey='api-key'
      onInit={(evt, editor) => {
        setInitialValue(value)
      }}
      initialValue={initialValue}
      value={value}
      init={{
        height: 500,
        plugins: [
          "advlist",
          "autolink",
          "lists",
          "link",
          "image",
          "charmap",
          "preview",
          "anchor",
          "searchreplace",
          "visualblocks",
          "code",
          "fullscreen",
          "insertdatetime",
          "media",
          "table",
          "code",
          "help",
          "wordcount",
        ],
        toolbar: "undo redo | styles | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | code preview",
        images_upload_url: "http://localhost:3001/upload_article_images",
        automatic_uploads: true,
        images_reuse_filename: true,
        images_upload_handler: handleImageUpload
      }}
      onEditorChange={(content) => {
        setValue(content)
      }}
    />
  )
}

Upvotes: 0

Nagesha S
Nagesha S

Reputation: 83

For me it worked with newValue props

<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 }",
      }}
    />

Upvotes: 0

Jolly Good
Jolly Good

Reputation: 550

For me it worked when I had two separate variables for initial value and for the editor on change. Ref: https://github.com/instructure-react/react-tinymce/issues/76

Upvotes: 0

CBrown77
CBrown77

Reputation: 557

Late answer, but here's the fix: https://github.com/tinymce/tinymce-react/issues/267.

Change initialValue={text} to value={text}.

This is the right setup for using the TinyMCE React component as a "controlled" component: https://www.tiny.cloud/docs/integrations/react/#usingthetinymcereactcomponentasacontrolledcomponent.

Upvotes: 23

Related Questions