Using CKEditor in jQuery Sortable

While using CKEditor or any HTML editor in Jquery Sortable list, one problem you may face is that on sorting the editors, the content of the editor is getting lost and editor is uneditable.

To fix this problem, the solution is to destroy the editor instance on sortable start event and reinitialize the editor on sortable stop event as below.

Sortable start event:

start: function (event, ui) {

var textarea_id = ui.item.find('textarea').attr('id');

CKEDITOR.instances[textarea_id].destroy();

}

Sortable stop event:

stop: function (event, ui) {

var textarea_id = ui.item.find('textarea').attr('id');

CKEDITOR.replace(textarea_id, {'width': '100%','height': 100});

}

Example:

Problem:
– From below link, the problem can be checked by dragging and dropping any editor to see that the content of the editor is removed and the editor is uneditable.
http://jsfiddle.net/sagrawal003/n8xcs0je/

Solution:
(Destroy editor instance in start event and reinitialize editor instance in stop event of the sortable method)
– From below link, the solution can be checked by dragging and dropping any editor to see that the content of the editor is retained and the editor is editable.
http://jsfiddle.net/sagrawal003/dea0Lz95/