Subscribe

Archive February 2011:

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:

How To Easily Format Dates With JavaScript

I recently wanted to format a date with JavaScript and found it quite hard. There are no really good built in functions for date formatting in JavaScript.

Enter Steven Levithan's JavaScript Date Format.

Here's an example on how to format a date that looks like this: 2011-02-16 | 14:58

var myDate = new Date().format('yyyy-mm-dd | HH:MM');

Really smooth and easy.

You can find a lot of custom date format examples + a reference in Steven's blog post.

To the top