TinyMCE editor content missing after drag and move

Question

I've got a page with multiple TinyMce editors and i have drag and drop feature enabled which allows me to change the order of each items.

But as i drag-drop an editor its content gets removed.

See the screen shots:

Before Drag-Drop

After Drag-Drop

Answer 1

Finally fixed the issue...

The solution is to first shut down the tinymce instance (id needed!)

tinymce.execCommand('mceRemoveControl',true,'editor_id');

then do the DOM action and reinit the tinymce instance

tinymce.execCommand('mceAddControl',true,'editor_id');

Answer 2

Add following code on drag end event:

onDragEnd(event: any) {
  var tinymceId = 'tinymceId_' + event.source.data.index; //get selected element id
  tinymce.get(tinymceId ).remove(); //remove existing instance
  $('#' + tinymceId ).closest('.mce-tinymce.mce-container').show();
  tinymce.init({id: tinymceId , selector: '#' + tinymceId , height: 200}; //you can add other properties into init()
}