Thursday, April 24, 2008

Tiny MCE

A couple of days ago, I started preparing for the long and arduous journy where I would teach myself how to integrate a TinyMCE rich text editor on a web page.
Here is how it went:
  1. Downloaded the source - This is always my first step. Get the source. Nothing to do without the source.
  2. Read the readme page which was really just a bunch of examples with the code all nicely rendered on the pages.
  3. Tried it out. Easy peazy!!!
  4. Went to bed - feeling VERY HAPPY with myself.
Getting a TinyMCE rich text editor is so easy to setup its a wonder why we don't see it even more often on websites. I know that every wordpress site and most CMS sites have it by default but a lot dont.

So just:
  1. upload the javascript files to your webhost.
  2. Add the tags to the head section of your site that identifies the source. ( see example below )
  3. Add a small bit of JS to set up the editor.
  4. Add a <textarea> </textarea> on your form.
  5. Done.

<script type='text/javascript' src='lib/javascript/tiny_mce/tiny_mce.js'></script>
<script type='text/javascript'>
tinyMCE.init({
mode : 'textareas',
theme : 'advanced',
theme_advanced_buttons1 : 'bold,italic,underline,separator,strikethrough,justifyleft,justifycenter,justifyright, justifyfull,bullist,numlist,undo,redo',
theme_advanced_buttons2 : '',
theme_advanced_buttons3 : '',
theme_advanced_toolbar_location : 'top',
theme_advanced_toolbar_align : 'left',
theme_advanced_statusbar_location : 'bottom',
extended_valid_elements : 'a[name|href|target|title|onclick],img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name],hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style]'
});
</script>