Using the WYSIWYG editor to format text and images


When you edit a page, you will see this menu (or ribbon) that provides a "What You See Is What You Get" method of designing the page. The menu provides a word processor-like interface for inputting content. If you are comfortable with raw html, you can click “Disable rich-text” below the WYSIWYG ribbon to edit the html code (sometimes this is the only way to accomplish complicated layouts).

The WYSIWYG ribbon has “MS Word-like” buttons to align and style text as well as add links, insert and upload images. One of the most important features is the paste from MS Word (the button that looks like a clipboard with a Word icon on it – W letter). If you are cutting and pasting directly from an Microsoft Office document it is important to use the paste from Word feature to strip extraneous Microsoft code from the clipboard contents.

For each option in the ribbon, you can roll over the icon to read the rollover text to see that action each accomplishes.

WYSIWYG tool bar image


icons for formatting

Bold, italic, Superscript, Subscript, Remove formatting buttons.


Alignment

Align left, center, and right.


Lists icon

Bullets, Insert/Remove numbered list, decrease indent, increase indent and block quotes.


Redo icon

Undo, Redo, insert text, insert Word content.


Link icons

add a "Linkit" link, a hyperlink, Unlink, and add an Anchor.


Source icon

The Source button is a toggle that shows the html code versus the WYSIWYG display.


Table hard return icon

This grouping adds a hard return, a special or foreign character, and a table.

A hard return is a line that breaks up text on your web page. In HTML, this is an <HR>.

The Omega symbol is used to add special or foreign characters. Use the Omega symbol to enter the following characters (and more) into the body of text. To enter them into the Title field, you will need to use the keyboard or cut and paste.

omega key for special characters

Tables can be aligned left, center, or right. If you right-click any table in the WYSIWYG editor, you can open the Table Properties dialog, which allows you to convert the first row or column into headers, add a caption, and adjust other properties.

table properties dialog box


Heading Styles

Headers pull down menu icon

Select text in order to apply the Heading styles defined by your template.


Embedding images

These two options are used to embed images into the web page as well as style the images to float left, right or center. See detailed instructions for embedding and stylizing images to learn more.


Embed image icon

Styles pulldown image