TinyMCE 4 in jQuery modal window

Question

I am loading TinyMCE rich text editor in a jQuery modal dialog. The problem is if I initialize when window loaded then the alignments are not proper. It works fine if I initialize inside the modal window open function. But the issue is when the modal window opened for second time it is again getting initialized. So I can see two editors.

The executeCommand from TinyMCE 3.X doesn't work in 4.X to destroy the editor when closing the modal window. I want to know how to unload the TinyMCE editor or how to detect if the TinyMCE editor is already loaded so that I can skip loading for the second time.

//tinymce.execCommand('mceRemoveControl',true,'content'); - I used with TinyMCE 3.X to unload

Thank you for the answers.

Answer 1

I have found the answer myself by using JS console.

tinyMCE.editors[0].editorManager.remove()

If loaded with multiple editor then to unload loop through the editor array and check the id attribute to find the exact editor instance to remove.

Answer 2

You need to specify which tinymce instance you want to remove, with either class or ID:

tinymce.editors[$(".editable").attr('id')].execCommand('mceRemoveControl', false, $(".editable"));
tinymce.editors["editor"].execCommand('mceRemoveControl', false, $("#editor"));