Dynamically adding TinyMCE-editor to textarea kills other instances

I have an html page with one or more textareas, each of which has a TinyMCE-editor (added to them by using tinyMCE.init({mode : "textareas", etc...});. At first they all work as they should, no problems. On the page is also a button that adds a new textarea to the page (using AJAX). In the handler of the AJAX call I append the responsetext to some div on the page. After that I try to add a TinyMCE to the new textfield using

tinyMCE.execCommand("mceAddControl", false, "text" + cnt);

Where cnt is some sort of offset, and "text" + cnt is unique for each textfield.

This works fine, except that all the TinyMCE-editors that were on the page before the new one arrived are now blank and do not respond to any input (nor typing nor clicking on any of their buttons). If I add another textarea to the page that one will have a working editor, and the previous one will also be killed.

I've tried adding the TinyMCE to the initial textareas seperately by using tinyMCE开发者_C百科.init({mode : "none", etc...}); and for each textarea calling tinyMCE.execCommand("mceAddControl", false, "text" + cnt);. But the result was the same.

I've also tried to do tinyMCE.init({...}) again for every new textarea, but that yields the same result.

Please help me, I'm getting more and more frustrated and desperate...

I know what the problem was. I appended the responseText of the AJAX-call which generates the inputfields to the div that already held the other inputfields. That was the problem. I now create a new div in which I place the new inputfields (so each textarea which has a tinyMCE editor is in his own div). This solves my problem.

I had this problem too, what fixed for me:

When adding each new textarea dynamically, it needed mceAddControl added to it after being added to the screen. So in the same js that appended the new textarea for tinymce I run

$('.tinymce').each(function(){
    tinyMCE.execCommand('mceAddControl',false,$(this).attr('id'))
  });

where tinymce is the class of my tinymce textarea's

Solved:

When you are adding new textarea by jquery at the time you can call bellow function.

addTinyMCE();

function addTinyMCE(){
  // Initialize
  tinymce.init({
    selector : "textarea",
}

I recall I had a similar problem once... this thread should help

I was having this exact issue and I lost hours and hours to it, whilst the rael_kid found his answer I'm going to add mine for anyone else who faces this problem.

My dynamic content was being added with

currentDiv.innerHtml += newContent;

This redraws all of the innerhtml which then seems to break the existing tinymce editors. To prevent this from occurring you need to use insertAdjacentHTML instead as below:

currentDiv.insertAdjacentHTML('beforeend', newContent);

Hope this saves someone else the hours I lost!

paste whole init code after $(wrapper).append('write your fields row div or tr code here'); //its working fine :)

tinyMCE.init({
    mode : "textareas",
    theme : "advanced",
        editor_selector : "mceEditor",
        editor_deselector : "mceNoEditor",  
    theme_advanced_buttons1 : "code,bold,italic,underline,image,separator,strikethrough,justifyleft,justifycenter,justifyright, justifyfull,bullist,numlist,undo,redo,link,unlink,|,tiny_mce_wiris_formulaEditor,tiny_mce_wiris_CAS,|,fullscreen,jbimages",
    theme_advanced_buttons2 : "",
    theme_advanced_buttons3 : "",
    theme_advanced_toolbar_location : "top",
    theme_advanced_toolbar_align : "left",
    theme_advanced_statusbar_location : "bottom",
    plugins : 'inlinepopups,tiny_mce_wiris,jbimages',
    setup : function(ed) {
        // Add a custom button
        ed.addButton('mybutton', {
            title : 'My button',
            image : 'img/example.gif',
            onclick : function() {
                // Add you own code to execute something on click
                ed.focus();
                ed.selection.setContent('Hello world!');
            }
        });
    }
});