CODEWITHSUNDEEP
javascriptjquerydrag-and-droptinymce
Alfie
Alfie

Reputation: 2784

TinyMCE editor content missing after drag and move

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 Before Drag-Drop

After Drag-Drop After Drag-Drop

Upvotes: 4

Views: 2535

Answers (2)

gds
gds

Reputation: 11

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()
}

Upvotes: 0

Alfie
Alfie

Reputation: 2784

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');

Upvotes: 4

Related Questions