Andrew Goodricke

This is a great (and powerful) JavaScript that you can plug in to your site for CMS purposes to make HTML or BBCode easily edited - well that’s what I use it for. TinyMCE is a super customisable WYSIWYG (What You See Is What You Get) that ranges from being very basic (for my purposes) to very advanced, you can even skin it if you so desire.

It’s extremly easy to integrate in to your site and is widely used in various applications such as: Wordpress, PHP-Nuke, Joomla and Expression Engine to name a few. A full list can be found here.

Just download it from the TinyMCE download page. Copy the jscripts folder to the root of your htdocs directory.

Then put the following code in between your page tags:

Simple Editor:
<script src="../jscripts/tiny_mce/tiny_mce.js" type="text/javascript"></script> <script type="text/javascript"><!--
tinyMCE.init({
mode : "textareas",
theme : "simple"
});
// --></script>


Now for any <textarea> it will be replaced with the TinyMCE editor functions, the code:


<textarea id="elm1" name="elm1" rows="15" cols="80" style="width: 80%">
<p>
<img src="media/logo.jpg" alt=" " hspace="5" vspace="5" width="250" height="48" align="right" /> TinyMCE is a platform independent web based Javascript HTML <strong>WYSIWYG</strong> editor control released as Open Source under LGPL by Moxiecode Systems AB. It has the ability to convert HTML TEXTAREA fields or other HTML elements to editor instances. TinyMCE is very easy to integrate into other Content Management Systems.</p>
<p>We recommend <a href="http://www.getfirefox.com" target="_blank">Firefox</a> and <a href="http://www.google.com" target="_blank">Google</a>
</p>
</textarea>


Would be displayed like:

The fully featured is extremely comprehensive and looks like:

In my application I replaced the “../” for the JavaScript location to a global variable that returns the base path for my site rather than it being a relative path.

I also customised my copy to to only show the buttons I required and I had the button bar at the top, the great thing about this plugin is that you can get it to automatically produce BBCode which is useful if you’ve got a user facing platform.

To find out about how to customise TinyMCE check this out.