Subscribe

Close

Thank you for visiting!

Please consider subscribing to the RSS feed or following me on Twitter.

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:

To the top