I am facing this issue where whenever I type in TinyMCE my cursor shifts to left automatically and I end up writing text from right to left. Its only happening in my deployed application but same works fine if I run the code locally on my machine. Any possible reason why this might be happening?

screenshot for same

Note: This was working fine few days ago

I am facing this issue where whenever I type in TinyMCE my cursor shifts to left automatically and I end up writing text from right to left. Its only happening in my deployed application but same works fine if I run the code locally on my machine. Any possible reason why this might be happening?

screenshot for same

Note: This was working fine few days ago

• javascript
• reactjs
• tinymce

• 1 Downgrading to v3.10 seems to have fixed the issue but I would like to know if anyone faced a similar issue or knows a fix – Divjot Singh Commented Mar 30, 2021 at 15:55
• I am facing the same issue. I am using version 3.5.0. Have you find the solution? – Amrendra Nath Commented Jun 3, 2021 at 15:14
• For me, I was using tinymce with React Final Form as a custom component for <Field> and faced this issue. I tried many things, and finally instead of replacing initialValue with value, just removing both worked for me! – Arvind K. Commented Jan 16, 2022 at 12:04
• But It is still an issue when I want to set initialValue in case of edit the field. Still trying to find a fix – Arvind K. Commented Jan 17, 2022 at 4:40

3 Answers 3

The below answer worked for me as well, went to project github but did not find any bug, so submitted one now, https://github.com/tinymce/tinymce-react/issues/267

Here is the actual answer from TinyMCE as to how to fix this issue:

Change this line:

initialValue={blogContent}

to

value={blogContent}

The initialValue prop should only be set once. It resets the editor including the cursor position when it changes.

If you want to have both the initialValue and the value set and initialized for the tinymce editor then this might help. :)

This happened to me in the context of a React app. On my case, I was using the state to initialize the tinymce Editor similar to the the following code.

const [values, setValues] = useState({
    content: "This is default the content",
});    

<Editor            
  initialValue={values.content}
  value={values.content}
  onEditorChange={handleEditorChange}
/>

However, the above code causes the editor to go crazy and write in a reverse order. It also caused the enter key to always go to the first line of the editor. And upon investigating, apparently, "the initialValue resets the editor including the cursor position when it changes" and that is according to this - github answer

note: I'm directly quoting the github answer above. Not trying to get credit for it

Now having that knowledge, I've refactored the code above so that you can have both the initialValue and the value set for the Editor.

const initialVal = "This is default the content";
const [values, setValues] = useState({
    content: initialVal,
});    

<Editor            
  initialValue={initialVal}
  value={values.content}
  onEditorChange={handleEditorChange}
/>

The simple explanation above is that the initialValue is now no longer tied to the state that if it changes, it won't "reset" the tinymce editor. Hope this helps. ;)

I faced the same problem. Downgrade V3.10 solved the problem.

_{Answer given by Divjot Singh on comment section.}