Adding tinyMCE Editor Dynamically And Get Its Value
tinyMCE is a great WYSIWYG editor which is really easy to implement.
However, if you want to dynamically create form fields and use tinyMCE with them, then it's not really as straightforward - but it's quite easy anyway. Here's how you do it.
First of all, you need to use tinyMCE.execCommand() to add the tinyMCE editor dynamically, like this:
tinyMCE.execCommand('mceAddControl',false,'textarea_id');
Where textarea_id is the id of your textarea. You'd also want to focus the textarea for better usability:
tinyMCE.get('textarea_id').focus();
However, this is not it! Your modified content must go into the the original textarea, thus we need to execute another tinyMCE command to do so:
tinyMCE.triggerSave();
Finally, if you need to access the contents of your tinyMCE area when the form's submitted, you must use another built-in tinyMCE function:
var content = tinyMCE.get('textarea_id').getContent();
Easy, huh? Now, this is how you add a tinyMCE editor dynamically to a specific textarea, and store the value for later use.
Here's more reading: