Oregon State University

WYSIWYG Editor

Hot Topic: 
Yes

TinyMCE is the WYSIWYG editor that OSU is using with Drupal. It is automatically activated when you go to edit a page and allows you to edit a page without using HTML.

Text Formatting

Formatting Options

The first toolbar includes four buttons for Bold, Italics, Underline, and Strikethrough. All of these should be used sparingly, especially underline and strikethrough. Underline is commonly reserved for links.

Text alignment buttons

You can also use the following buttons to align your text. You can also align pictures as well.

Lists and Indentation

Formating Options

The first button inserts an unordered list, while the second button adds an ordered number list.

Also in this toolbar are buttons for indentation. Outdent decreases the indentation by one level, while Indent increases the indent.

Undo and Redo

Undo and Redo buttons

By clicking Undo, you can undo any change you make, while Redo reverses your Undo.

Linking

Hyperlinks

The following buttons are for hyperlinking. Please review the creating a link tutorial for a full explination on how to use these buttons.

Insert/edit image

Insert/edit image

Clicking on this button adds a new image or edits an existing image. See adding an image for more information.

Advanced Formatting

Advanced Formatting buttons

These buttons are specially used. Clean up messy code is a valuable tool to clean up your HTML code. It is mainly used when you copy content from an outside source. Superscript and Subscript are used in special cases, like representing a number to the X power. By using the Edit HTML source button, you can view the actual HTML code of your page and edit it as you wish. This is only recommended for advanced users with knowlege of HTML. Insert horizontal ruler simply places a line across your page.

Styling

Format Dropdown

Format allows you to specify the function of the copy. By selecting "-- Format --," you can clear the format applied to the selected text.

You can also tag copy as Formatted or Address. Lastly, you can select which level of heading is used. Heading 1 is used for the site title and heading 2 is used for the page title. Most of the time you will use headings 3 and 4, though headings 5 and 6 are there should you need them. Headings should not be used to achieve a certain styling, but to provide an outline for the page.

FCKEditor Style Menu

Style allows you to style text in a variety of ways, depending on what your site provides.

Find (and replace)

Find button

Find WindowThis handy tool valuable in larger pages. When you click on this button, you can search for anything inside your page. The Replace tab allows you to search for something and replace it with another. For example, searching for "website" and replacing it with "Web site." Match case allows you to search for an exact match, including capitalizations.

Cut, Copy, and Paste

Cut, Copy, and Paste buttons

Cut removes the selected content from your page, allowing you to paste it. Using the Copy button, you can select anything on your page and copy it for later use. Paste, of course, allows you to paste what you copied.

Miscellaneous Buttons

Advanced buttons

Toggle guidelines/invisible elements is used to obtain a more realistic view to your page while creating it. For example, when you toggle it off while having a borderless table, it will hide the table grid. The remove formatting is the all-in-one tool to remove custom styles to your text, like Bold and Italics. It also removes hidden code relating to text formatting. The Insert custom character button allows you to browse a handful of custom characters, like the degree symbol or the copyright symbol, and insert them into your page.

Paste from Word and Toggle spellchecker buttons

By pressing the Paste from Word button, you can simply paste the copied information into the pop-up window and press Insert. This feature removes all of Word's custom text formatting. Toggle spellchecker should be used every time you create a page. Just press the button, and it checks your whole page for misspelled words.

Tables

Table buttons

See the tables tutorial for more information on working with tables.