TinyMCE input being written in reverse order

user_12574783 0
Viewed 1587

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

reactjs tinymce javascript
3 Answers

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.

user_68950180

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. ;)

user_21158320

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

Answer given by Divjot Singh on comment section.

user_36628410
Related