Drop Shadow

Rich Content Editor

The TinyMCE rich content editor adds a word processor-like button bar to TEXTAREA fields in your web forms.

We have the TinyMCE “platform independent web-based Javascript HTML WYSIWYG editor” installed on the main web server. What this means is that text areas can now accept rich text: if it can be done in HTML, it can be inserted in your forms.

The form result will be standard HTML.

Security

You should only use rich content editors of any kind, including this one, on pages behind a password. Otherwise, you are opening yourself up to “cross-site scripting” attacks: hackers and spammers will be able to insert their HTML into your web pages.

Easy Integration

The easiest way to add TinyMCE to your web page is by adding the following six lines to the HEAD of your document:

<script type="text/javascript" src="/scripts/tiny_mce/tiny_mce.js"></script> <script type="text/javascript"> tinyMCE.init({ mode : "textareas" }); </script>

This will convert all textareas on your page to rich content textareas.

If your site is not on www.sandiego.edu or home.sandiego.edu, you’ll need to install the TinyMCE plug-in on your server.

Simple and advanced

By default, TinyMCE displays the simple theme. You have a more advanced option, however, which gives your users more options.

Simple Editor

The simpler Tiny MCE button bar shows the most commonly-needed formatting buttons, such as bold, italic, underline, and lists.

Simple view makes bold, italic, underline, strike-thru, and lists available in the buttons. It provides all of the normal stuff that would go into a text box if they aren’t making a web page in the box.

The simple editor is the default.

For example:

<script type="text/javascript" src="/scripts/tiny_mce/tiny_mce.js"></script> <script type="text/javascript"> tinyMCE.init({ mode : "textareas" }); </script>

The above script will provide the simple editor.

Advanced Editor

The advanced Tiny MCE button bar allows for editing just about any sort of HTML you want, including CSS styles.

Advanced view makes all standard HTML tags available in the buttons. It looks a lot like a standard word processing button bar, and is just as confusing, but provides pretty much everything someone would need to insert into a text box.

For example:

<script type="text/javascript" src="/scripts/tiny_mce/tiny_mce.js"></script> <script type="text/javascript"> tinyMCE.init({ mode : "textareas", theme : "advanced" }); </script>

Example

This form does nothing except let you try out the rich content editor.

Auto-format

Tiny MCE will retain formatting on text that is pasted in from a word processor, such as Microsoft Word. Word headings will be converted to HTML headlines, for example.

Specific textareas

Often, you will want rich content in one or two textareas, but not in the rest. You can specify a mode of “exact” and then list the IDs of the textareas that should have rich content.

<script type="text/javascript" src="/scripts/tiny_mce/tiny_mce.js"></script> <script type="text/javascript"> tinyMCE.init({ mode : "exact", elements: "bio, comment", theme: "simple" }); </script>

Customizing the advanced theme

If you want more features than the simple theme has, but not so many as the advanced theme has, you can customize the available buttons on the advanced theme. You’ll need to go to the TinyMCE documenation to see a list of all buttons, but you can remove a button with the theme_advanced_disable option. List the buttons you don’t want, and they will disappear.

<script type="text/javascript" src="/scripts/tiny_mce/tiny_mce.js"></script> <script type="text/javascript"> tinyMCE.init({ mode : "textareas", theme : "advanced", theme_advanced_disable: "bold, italic" }); </script>

If you want full control, you can replace each of the three rows of the advanced theme using the theme_advanced_buttons1, theme_advanced_buttons2, and theme_advanced_buttons3 options. They apply to the top, middle, and bottom row respectively.

Specifically set each of those options to a list of the buttons you want in those rows. Set the option to empty ("") to get rid of the row.

For example, here is the way we get two customized rows out of the advanced theme on the news and events CMS:

<script type="text/javascript" src="/scripts/tiny_mce/tiny_mce.js"></script> <script type="text/javascript"> tinyMCE.init({ mode : "exact", elements: "body, qualifications, additional_info, description", theme: "advanced", theme_advanced_buttons1: "bold, italic, removeformat, separator, charmap, separator, justifyleft, justifycenter, justifyright, justifyfull, formatselect", theme_advanced_buttons2: "bullist, numlist, separator, outdent, indent, separator, hr, separator, undo, redo, separator, link, unlink, separator, cleanup, visualaid, help, code", theme_advanced_buttons3: "" }); </script>

Browser support

Unlike many other rich content editors, TinyMCE uses standard Javascript. It should work in all browsers, and in fact does work in most.

Firefox

Most, if not all, of the buttons work in Firefox and the other Mozilla-based browsers. Firefox does not maintain styles when pasting in styled text.

Explorer

Explorer supports both the buttons and the pasting in of styled text.

Safari

Most of the buttons work in the latest Safari on Mac OS X 10.4.x and 10.5.x.

Safari from earlier versions will not maintain styles, but they may still use the text input as a normal text input.

Disabling HTML in form results

If you want to display the results of a Tiny MCE textarea on screen, you will want to strip or encode any HTML. Otherwise, you are opening yourself up to cross-site scripting attacks. PHP contains several commands that can assist you. Two of them you’ll likely use most often are htmlentities and strip_tags.

$clean = htmlentities($field)Encode any special HTML entities, such as the greater-than symbol and the less-than symbol, so that the special characters are no longer special.
$clean = strip_tags($field)Remove HTML tags from the text, leaving the unformatted text behind. You can also specify that some tags are allowed.
You will probably want to limit the use of the rich content editor to USD community members who have logged in using the Single Sign-on.