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 multiple elements that 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!

WIZ-ee-wig, whizzy-wig, whiz-zee-wig!

According to Wikipedia, a WYSIWYG editor is a system in which content (text and graphics) can be edited in a form closely resembling its appearance when printed or displayed as a finished product, such as a printed document, web page, or slide presentation.

So basically, what you see is what you get (roughly)!

You can't put your cat in it. But you can put many other things in a WYSIWYG. In addition to the basics such as text and images, you can embed code from third-party media services such as Twitter and YouTube. Below is an interactive Google map of Carnegie Mellon. Look, we got a 4.7 star rating based on 300+ reviews! The .3 developed allergies to Scotty and were torn up about it too.

Yes! On occasion you might need to tweak 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.