My HTML page consists of text areas with TinyMCE-editors added to them using
tinyMCE.init({mode : "textareas", etc...});
. Initially, everything works smoothly. However, I have a button that dynamically adds a new textarea to the page via AJAX. Upon receiving and appending the response text to a specific div on the page, I attempt to add a new TinyMCE editor to the newly created textarea by executing:
tinyMCE.execCommand("mceAddControl", false, "text" + cnt);
Here, cnt
acts as an offset value, making "text" + cnt
unique for each textarea.
The issue arises when this process causes all previously existing TinyMCE editors to become blank and unresponsive to any input. Subsequent additions of textareas result in only the newest textarea having a functional editor while the rest are rendered dysfunctional.
I attempted initializing the TinyMCE editors for the initial text areas separately using
tinyMCE.init({mode : "none", etc...});
followed by adding controls individually using tinyMCE.execCommand("mceAddControl", false, "text" + cnt);
, but encountered the same problem.
Even re-initializing tinyMCE.init({...})
for every new textarea did not resolve the issue, leaving me increasingly frustrated and desperate for a solution...