Carnegie Mellon University

CMU Web

A service provided by the University CMS Team

WYSIWYG Editor

A WYSIWYG, an acronym for "what you see is what you get", is an open content area for text, images, media and more. It is the most flexible content area in the CMS and you'll find a WYSIWYG editor in many of the elements which comprise page layout. The nice thing about a WYSIWYG is that every single one of them is identical which means you only have to master it once!

Yes! On occasion you might need to modify the HTML code generated by the WYSIWYG to fix spacing or adjust styles. Click on the source code button in the toolbar to open an HTML editor.

Source code button

The HTML editor has options to assist you while you edit the source code.

HTML editor

Toolbar

The toolbar at the top of the WYSIWYG editor contains options for assembling and editing content. You can fine-tune text and enhance content with images, links, media and tables.

The tools are defined below, links are provided if additional instructions are available.

WYSIWYG editor

The WYSIWYG editor.

Actions

Tool Function
Undo Undo
Redo Redo

Fine-Tune Text

Tool Function
Bold Bold
Italic Italics
Align Left Align left
Align Center Align center
Unordered/bulleted list Bullet list
Ordered/numbered list Numbered list
Decrease indent Decrease indent
Decrease indent Increase indent

Change View

Tool Function
Source code Source code
Fullscreen Fullscreen

Menus

The WYSIWYG menus contain additional options plus keyboard shortcuts when available.

Edit

Edit menu

The Edit menu contains options to Cut, Copy, Paste and Paste as text. Paste as text removes all formatting/styling of text and converts it to plain text.

Insert

Insert menu

The Insert menu contains the insertable objects available in the toolbar, plus options to insert a Special Character and a Horizontal Line.

Table

Table menu

The Table menu contains the tools to build and modify a table; more on tables.

View

View menu

The View menu contains options to assist you while you work in the WYSIWYG. Visual aids pertain to tables; when enabled, outlines are displayed to represent table borders. Show blocks displays content regions that are designated as headings and paragraphs.

Tools

Tools menu

The Tools menu contains the option to perform a Spellcheck, plus the Source Code and Fullscreen view options available in the toolbar.

Formats

Formats menu

The Formats menu contains the option to apply formatting to content; more on applying formats.

Tips

This error typically happens when content is copied and pasted from an external source (usually Microsoft Word) and it retains custom code that the CMS considers to be invalid. A common example of this error is:

Invalid XML: The prefix "o" for element "o:p" is not bound.

This code needs to be removed before the CMS will allow the page to be saved. In Edit mode, view the source code (< > tool) for all WYSIWYG areas and remove all instances of the invalid code, such as:

<o:p></o:p>

It is also a good idea to only paste plain text into a WYSIWYG. Use the Edit > Paste as text option shown above before pasting in content.