search

tinymce / tinymce-react

Offical TinyMCE React component
MIT License
937 stars 152 forks source link

Cursor jump back to start when pressed any key in the keyboard. #504

Closed vasu-09 closed 3 months ago

vasu-09 commented 3 months ago

I have built a project using the TinyMCE. Initially when I tried to edit the content in TinyMCE editor, the cursor Jump back to start when hit the enter button.

Later, when I search in the google I found this article https://github.com/tinymce/tinymce-react/issues/88, where it says to use the onEditorChange. After using the onEditorChange the cursor is moving to start even for a single key press in the Keyboard.

I have given the code below.

const handleEditorChange = (newContent, editor) => { setContent(newContent); };

const handleImageUpload = (blobInfo) => { return new Promise((resolve, reject) => { const formData = new FormData(); formData.append('image', blobInfo.blob(), blobInfo.filename());

const config = { headers: { 'Content-Type': 'multipart/form-data', }, };

axios.post("http://localhost:8080/upload/image", formData, { ...config, responseType: 'json' }) .then(response => { if (response && response.data) { const imageData = response.data; const imageUrl = imageData.src; resolve(imageUrl); } else { reject("Image upload failed"); } }) .catch(error => { reject("Image upload failed"); }); }); };

<Editor apiKey={process.env.REACT_APP_TINY_MCE_API_KEY} initialValue={content} value={content} onEditorChange={handleEditorChange} init={{ height: 500, menubar: false, plugins: [ "advlist", "autolink", "lists", "link", "image", "charmap", "preview", "anchor", "searchreplace", "visualblocks", "code", "fullscreen", "insertdatetime", "media", "table", "code", "help", "wordcount", "image", "codesample", "link", "emoticons", "quickbars", "insertdatetime", "save" ], toolbar: 'undo redo | blocks | ' + 'bold italic forecolor image table tabledelete | tableprops tablerowprops tablecellprops | tableinsertrowbefore tableinsertrowafter tabledeleterow | tableinsertcolbefore tableinsertcolafter tabledeletecol | alignleft aligncenter ' + 'alignright alignjustify | save insertdatetime emoticons link codesample media searchreplace bullist numlist outdent indent visualblocks preview | ' + 'removeformat | help| code charmap fullscreen ', images_upload_handler: handleImageUpload, content_style: "body { font-family:Helvetica,Arial,sans-serif; font-size:14px }", }} // Here's where onEditorChange is added />

Please help in resolving this issue.

What is the expected behavior? We should just get new line form the point where cursor is located

Which versions of TinyMCE, and which browser / OS are affected by this issue? tinymce/tinymce-react = 4.3.2

TheSpyder commented 3 months ago

I'm not sure your onEditorChange is correct. Here's the details referenced in that other issue, it moved to our documentation website.

https://www.tiny.cloud/docs/tinymce/latest/react-ref/#using-the-tinymce-react-component-as-a-controlled-component

danoaky-tiny commented 3 months ago

The problem is you're using the same state for the initialValue and value props and then setting it within onEditorChange:

<Editor
  initialValue={content}
  value={content}
/>

You can't do that. See https://www.tiny.cloud/docs/tinymce/6/react-ref/#initialvalue and it explains what's happening here.

Have a look at the part of the docs that @TheSpyder linked to as that explains the easiest way to use the Editor component. Let us know if you need any further help.