TinyMCE 4 not working with sortable jquery divs

Question

I am trying to make an application where one can build newsletters in real time by dragging dropping divs and editing them. To sort divs I am using jquery.sortable(), these divs

Answer 1

Tinymce does not like it to have an editor moved around in the dom. Afterwards the editor won't work anymore.

The way to proceed here is to shut down a tinymce instance before its root element (i.e. textarea or div) gets moved to another location in the dom. After the dislocation you may reinit the editor as usual.

// Save the tinymce content to Textarea
tinyMCE.triggerSave();

//Disabling the text area
var textareaId = [PUT YOUR TEXTAREA ID HERE]; 
tinyMCE.execCommand("mceRemoveEditor", false, textareaId);

// Moving code - Your code may be different
$(this).insertAfter($(this).next());

//reinitiate tinyMCE - custom initTinyMCE function, you can do your way
initTinyMCE();