iframe of TinyMCE editor is removed from DOM after moving the editor

Question

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.

Answer 1

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/