TinyMCE / WYSIWYG Text Editor

Application: 
OSU Drupal 6

 

The TinyMCE text editor used in OSU Drupal 6 is not a core module of Drupal.  Drupal itself does not use any one particular text editor, instead it leaves the selection of this tool up to whomever puts the installation package together.

The TinyMCE text editor is a programing library that has been created by MoxieCode and contributed to the Open Source community.  Many different platforms, including WordPress and Joomla, can also use this text editor.  In the OSU Drupal 6 installation profile, it is used in conjunction with the WYSIWYG API module and the IMCE file browser module.

tinymce text editor with toolbar and text editor area

The text editor itself is relatively straightforward in its use.  There is often confusion, though, for those who are new to web publishing, because while the editor contains many features that are similar to a word processing program such as Microsoft Word or Open Office Writer, the environment on the Web is quite a bit different from the environment on your personal computer.

In this section, we'll cover a variety of different topics that relate to the use of the text editor including how to create different types of hyperlinks and how to embed media.

Input Formats

Application: 
OSU Drupal 6

 

One of the biggest sources of confusion for new users surrounds the use of input formats.

Input formats are a necessary security feature on a dynamic website - especially one that allows interaction from an external audience.

A dynamic website can use a variety of different code languages.  At the base of all the code languages is HTML, which is the language of the web.  For Drupal, PHP is a main language as well.  PHP is a dynamic scripting language that provides the ability to create and display real time changes on your site.  Drupal has been built using this language.  Other code languages, such as javascript, might be present as well.

While these different types of code are used to create really cool things on your site, they can also be used maliciously if the wrong people are allowed to use them.  Even Cascading Style Sheets (CSS), which isn't a language at all, but a set of style specifications, can be used as a vehicle to damage or take over your site.

Input formats are a way to control what kind of user is allowed to use specific types of code, or "input", in the Tiny MCE text editor.

There are three different input formats defined on your OSU Drupal 6 site:

  • Filtered HTML
    • Default input format that every role can use.  Strips all but the most essential HTML code out of text entries entered into the text editor. A rich text editor is provided here.
  • Full HTML
    • Available to Authors, Advanced Authors, and Administrators. Allows the inclusion of inline CSS styles, which help with formatting content. A rich text editor is provided here.
  • PHP
    • Available to Advanced Authors and Administrators.  Allows the use of PHP and other complex code.  No rich text editor is provided here.

To allow interaction from anonymous users, such as providing them the ability to submit Webforms, a default input format must be supplied that all users, including the anonymous ones, can use.  Anonymous users can only use Filtered HTML.  Allowing anonymous users access to any of the other input formats is dangerous, as you don't know who is on the other end and what they are injecting into your site via the text editor.

Authors can use both Filtered HTML and Full HTML.  This allows authors on the site the ability to add inline CSS styles to their content to do things such as embedding an image and having the text float up around the image.  Keeping this in mind, one of the first things to look at if your embedded images or video players aren't acting the way you expect them to, check the input format to ensure it's set to Full HTML.  Authors do not even see the PHP option.

Author Input Formats
author level input formats: Filtered HTML option and Full HTML option, Full HTML is checked

Advanced Authors and Administrators can use all input formats.  This is where the assignment of roles on a site is very important.  If you have an Advanced Author or Administrator who does not know how to write code, they should be strongly discouraged from experimenting on a production site as different types of code, when used incorrectly, can completely destroy your site.

Advanced Author and Administrator Input Formats
advanced author and admin input format options: filtered html, full html (checked), and php

So now that we understand a little bit about input formats, let's move on to some specifics about using the text editor...

Basic Text Editor Features

Application: 
OSU Drupal 6

 

The Tiny MCE WYSIWYG editor used in OSU Drupal 6 has some basic features to get acquainted with.

Toolbar

The most obvious feature is the toolbar.  The standard toolbar provides the user with the ability to create both basic and formatted text, add media, apply preset CSS styles, and perform some rather complex table functions.

wysiwyg toolbar

Most of the icons on the toolbar should be familiar to a user who has any kind of experience with a word processing application such as Microsoft Word or Open Office Writer.  In the event you come across a symbol that you're not sure of, though, just hover on the button and hold for about a second.  A tool tip will then appear to give you the title of the button.

hover tip displaying when mouse is on tool button

active button next to an inactive button

Sometimes you may encounter a button that is inactive (greyed out).  When this occurs it is generally because something in the content area either needs to be selected, or, in the case of the table formatting buttons, a table must be inserted into the body area.

Enable/Disable Link

At the bottom left of the text editor is a link that says Disable Rich Text

rich text editor enabled

Clicking on this link will turn off the rich text editor and the buttons will disappear.  This feature exists for those users who prefer to code in HTML.

click on disable rich text link

If you click the Disable Rich Text link accidentally, note that the text will then change to Enable Rich Text.  Just click the link again to bring the rich text editor back.

click enable rich text link