Using the WYSIWYG toolbar

How to use the WYSIWYG toolbar in the pages editor and dynamic modules.

The WYSIWYG toolbar contains a number of useful buttons to style and lay out content. It is very similar to WYSIWYG toolbars in commonly used word processing applications.

Select the text you wish to style, or place the cursor where you wish to insert an element, and then use the WYSIWYG buttons to perform the desired action.

From left to right, these include:

  • Bold text
  • Italicize text
  • Underline text
  • Add/edit link
  • Remove link
  • Style dropdown menu
  • Remove formatting
  • Unordered list
  • Ordered list
  • Table
  • Align left
  • Align right
  • Align center
  • Align full
  • Outdent
  • Indent
  • Undo
  • Redo
  • Edit HTML source
  • Insert image
  • Insert media
  • Insert widget

Note that when you enter text into the editable field, all HTML formatting will be done for you. If you wish to enter raw HTML syntax, you must use the “Edit HTML source” button.

Additionally, any contact pasted from Microsoft Word will automatically be cleaned up.

Client-side spell-checking in WYSIWYG areas on both the dynamic modules and the Pages editor is enabled–users of recent versions of Firefox, Safari, or Chrome will see misspelled words underlined in red and can right-click to see suggested corrections.

Users who are working with tables in WYSIWYG regions should note that right clicking on table elements, such as a table row, will bring up a custom contextual menu containing special table editing options. To use the built-in OS contextual menu instead (such as for spell checking), simply right click on an element that is not related to tables.

For details on adding images to your editable fields, see “Adding an image to a web page”.