Content Formatting

The WYSIWYG Text Editor

When editing pages you will see a toolbar menu that provides a "What You See Is What You Get" (WYSIWYG) display to speed up your formatting of content on your website.  If you are comfortable with HTML code, you can click the Source button to edit the source directly.

The WYSIWYG toolbar 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 a Microsoft Office document, clicking this button before doing so may help preserve some of the styling and formatting from your Word doc.

Editor Toolbar explained

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

Text Editor

Maximize screen

Maximize your editing screen when working on long pages.  


Bold format

Bold, italic, superscript, subscript, remove formatting.


Link and anchor

Add a hyperlink to internal and external content, unlink, and add an anchor link.


Align

Align left, center, and right.


Lists and indent

Bullets, Insert/Remove numbered list, decrease indent, increase indent.

For numbered lists, you can customize the list style, which defaults to numerical digits. Other options include roman numerals (e.g. i, ii, iii) and letters (e.g. a, b, c). Right click on a numbered list item after adding it, and then select "Numbered list properties" to change the list style. See examples on our demo site.


undo and redo buttons

Undo, redo.


Text and Word paste

Insert text, insert Word content.


image media browser

Insert/upload images and embed video

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.


Callout text

Insert a callout block, made up of a title and body. Used to call out some notable information.


Quote and table

Insert styled quote, insert table.

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.


Insert iframe and view source code

Insert iframe, view HTML source.


Set language

Use Set Language when entering non-English text. This allows a screen reader to recognize text as another language and properly read it aloud. Highlight your text and select the language from the dropdown. It will add code around the text that is invisible to you. To see the code, click the Source icon.


Horizontal rule

Adds a horizontal rule for helping to create visual separation of topics.


Special characters

special or foreign character

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.


wrap code

 Used to style text as code, using a monospace font and has only specialized use cases.


Format headings

Used to control the format and purpose of the text. Headings start at heading level 2 instead of level 1 because level 1 is always reserved for the page title. See more information on heading styles below. The "Formatted" option should be used for pre-formatted text only, like a block of code.


Styles button from the editor toolbar

Used to apply a style to the highlighted text.

To create a Primary (solid background) or Secondary (Outline) button, add a hyperlink to text, select that link and chose a style from the drop-down.

Muted headings (h2 and h3) can be added by first adding the heading text to a new line, then selecting Muted H2 or Muted H3 from the drop-down. These styles apply a smaller font size to the headings.

Not all sites have styles available. Refer to Additional Styling Options for more information.

 

More options

Use appropriate headings to create page structure for an accessible site and to improve visual readability.

When creating a heading, always start with the highest number. If there are sub-headings within that heading, use a level one lower than that one. Do not go out of order to get a particular visual look, as that will cause confusion for visitors using screen readers or other assistive technologies.

Avoid the use of bold for headings - users using assistive technology like screen readers may not be able to distinguish between bold and normal text, but will be able to distinguish between various headings.

Spell Check

When editing a page, you may notice that some words have a red underline. This indicates that your browser's spell checker has found a word that may be misspelled.

To see the suggested alternate spellings:

  • Cmd + Click (Mac)
  • Ctrl + Click (Windows)

Then select the alternate word.