Add a tinymce editor dynamically when you already have tinymce instances on your page

Question

This is a followup to this question i already asked : Add a tinymce editor dynamically

I have a page with editors in it (tinyMCE). I add textarea dynamically (an add entry button). It works fine expect that it undo all change i have done to other TinyMCE. If i loaded a page with a tinyMCE displaying "Something 40" and i typed "Something 40 and some stuff", and then i click to add an entry, a new tinymce appear but the first one now display "Something 40".

I use the following code :

<script type="text/javascript">
//<![CDATA[
tinyMCE.init({"selector":"textarea.tinymce","theme_advanced_toolbar_location":"top","theme_advanced_toolbar_align":"left","theme_advanced_statusbar_location":"bottom","theme_advanced_buttons3_add":"tablecontrols,fullscreen","toolbar":"insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image","plugins":"paste,table,fullscreen,image,code,link","dialog_type":"modal","content_css":"/assets/application.css"});
//]]>
</script>
<script>
function loadTinyMCEEditor() {
tinyMCE.init({"selector":"textarea.tinymce","theme_advanced_toolbar_location":"top","theme_advanced_toolbar_align":"left","theme_advanced_statusbar_location":"bottom","theme_advanced_buttons3_add":"tablecontrols,fullscreen","toolbar":"insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image","plugins":"paste,table,fullscreen,image,code,link","dialog_type":"modal","content_css":"/assets/application.css"});
}
</script>

Both are the same options to add a tiny MCE, the first is for the textarea i want to display as editor at page display, the second is in a function to be called when i add a textarea dynamically.

Here is how i add tinyMCE to nex textarea :

$(document).on 'nested:fieldAdded', (event) ->
  loadTinyMCEEditor()
  #alert "azeaze"+event.field.attr("id")
  #alert "totoooot "+event.field.find('textarea').attr("id")
  tinyMCE.execCommand "mceAddControl", true, event.field.find('textarea').attr("id")

How can i add a tinyMCE without erasing the changes of other TinyMCE fields?

Answer 1

You can use :

tinymce.EditorManager.execCommand('mceAddEditor', true, "here_place_editor_class or ID");

Also you need to generate this selection ID dynamically if you want to use ID and each editor instance to be unique.