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
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
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. |
