0

I have a sortable collection of TinyMce editors and when an editor is moved, this one doesn't work anymore.

The TinyMCE editor iframe turn empty after drag end event but I don't understand why.

The editor toolbar is here but doesn't work and the content disappear without possibility of typing in it again.

Is there a way to reinitialize the dragged editor with his initial content after drag end event.

I'm using Reactjs and @dnd-kit/sortable.

Jayss230
  • 13
  • 5

1 Answers1

0

Moving the iFrame editor around the DOM is not supported. If you want to move the editor you can achieve this by removing the editor with remove() and reinitializing it with init() once it has been moved.

https://www.tiny.cloud/docs/tinymce/6/apis/tinymce.root/#remove https://www.tiny.cloud/docs/tinymce/6/apis/tinymce.root/#init

The other alternative is to run TinyMCE in inline mode: https://www.tiny.cloud/docs/tinymce/6/use-tinymce-inline/

tinyland
  • 241
  • 1
  • 4
  • Thanks for your answer. How can I init() the Editor after call remove() method, knowing that I'm using tinymce.Editor ReactJS Component ? I already try to use inline mode, but this one doesnt work on mobile devices, according to the documentation. Can you give me an example of the reitinialization case please ? – Jayss230 Nov 18 '22 at 10:12
  • Here is a basic example of using init() and remove() to get you started: https://fiddle.tiny.cloud/7niaab – tinyland Nov 18 '22 at 20:18