Dynamically adding TinyMCE-editor to textarea kills other instances

Question

Hi,

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.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...

Answer 1

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

Answer 2

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.