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. There are a couple different versions of the editor you may see, one of which has more limited options. Here's a look at the fully featured version, which is available on most primary body or description fields:

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.

Bold, italic, superscript, subscript, remove formatting.

Add a hyperlink to internal and external content, and add an anchor link. Instead of clicking the link button to create a link, try using a the keyboard shortcut Ctrl + K (Windows) or Cmd + K (Mac) after highlighting text. Many other applications support this same keyboard shortcut for creating links.

Text alignment (left, center, right), unordered list, ordered list, and list indentation controls.

For ordered lists, you can customize the list numbering style, which defaults to numerical digits. Other options include roman numerals (e.g., i, ii, iii) and letters (e.g., a, b, c). After inserting the list, click the "Source" button, find the <ol> element that corresponds with your list, and insert a "type" attribute:

Add a "type" attribute as follow:

• <ol type="i"> for Lower Roman (i, ii, iii, etc.)
• <ol type="I">for Upper Roman (I, II, III, etc.)
• <ol type="a"> for Lower Alpha (a, b, c, etc.)
• <ol type="A"> for Upper Alpha (A, B, C, etc.)

In a future update, we plan to allow this to be controlled without using Source editing.

See examples on our demo site.

Undo, redo.

Insert/upload media like images, videos, and audio.

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.

These four buttons allow you to:

• Insert a "callout" block, made up of a title and body. Used to call out some notable information. Insert styled quote, insert table.
• Insert a blockquote, used for indicating text is quoted from another source.
• Insert a table.
• Insert an iframe.

 View and edit HTML source.

Used to open the find and replace dialog.

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

Use Set Language when entering non-English text. This allows a screen reader to recognize text as another language and properly read it aloud. It's important to note that this is not a translation feature. The text inserted should already be in non-English language. This feature is simply for accessibility. It will add code around the text that is invisible to you. To see the code, click the Source icon.

special or foreign character

The Omega button is used to add special or foreign characters. To enter them into the Title field, you will need to use the keyboard or cut and paste.

The middle button button is for inserting a block of pre-formatted (monospaced) text, typically used for showing code samples.

The last button is used to style inline text text as code, using a monospace font. It has only specialized use cases.

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.

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.

Text Transformations and Auto-Formatting

Typing certain sequences of characters in the editor will trigger text transformations and automatic formatting.

Inline Auto-formatting

• Bold: Type ** or __ around your text.
• Italic: Type * or _ around your text.
• Code: Type ˋ around your text.

Block Auto-formatting

• Block quotes - Start a line with ﹥ followed by a space.
• Headings:
  1. Heading 2 - Start a line with ## followed by a space.
  2. Heading 3 - Start a line with ### followed by a space.
  3. Heading 4 - Start a line with #### followed by a space.
• Lists:
  • Numbered lists - Start a line with 1. or 1) followed by a space.
  • Bulleted lists - Start a line with * or - followed by a space.
• Code blocks - Start a line with ˋˋˋ.
• Horizontal lines - Start a line with ---.

Typography Transformations

• Ellipsis: ... to …
• enDash: -- to –
• emDash: --- to —
• Quotes: "Quoted text" to “Quoted text” and 'Quoted text' to ‘Quoted text’ (replaces straight quotations with curly quotations)
• (tm) to ™
• (r) to ®
• (c) to ©
• Mathematical:
  • 1/2 to: ½
  • 1/3 to: ⅓
  • 2/3 to: ⅔
  • 1/4 to: ¼
  • 3/4 to: ¾
  • <= to: ≤
  • >= to: ≥
  • != to: ≠
  • <- to: ←
  • -> to: →

Most transformation can be undone by using the undo button in the toolbar or undo keyboard shortcut.