Purdue University Northwest / Marketing and Communications / Strategy and Guidance / Website / CMS Guide / Getting Started / Rich Text Editing

Rich Text Editing

Rich text or WYSIWYG editing is central to any web content management system. This page outlines the options available within the PNW.edu WYSIWYG toolbar.

Rich text editing is also referred to as What You See Is What You Get (WYSIWYG) editing. The WYSIWYG editor mimics how content will look when published to the site and provides capabilities that are similar to desktop word processing software applications such as Microsoft Word.

When working in the system, you can see a tool-tip that describes the function of each item by hovering over its icon.

Note: If you only see one row of toolbar buttons, please click the Toggle Toolbar button (second from the end) to expose the second row of buttons.

Menus in the Visual Editor Toolbar

Paragraph Styles Menu

The Paragraph Styles menu allows for the application of heading tags / styles to text on a page. To use a heading style, first type the text into the editor. Next, highlight the text to be styled and then choose the appropriate heading style from the menu. To remove a heading style from text, highlight the text and reselect the same heading style from the menu.

For accessibility and search engine optimization purposes, it is important to use headings in a hierarchical and sequential fashion. In other words, Heading 2 follows Heading 1, Heading 3 follows Heading 2, and so on. Note: the Heading 1 style should only be used once on a given page and is usually automatically applied to the page title, therefore it is only useful within the WYSIWYG on rare occasions.

Formats Menu

The Formats menu allows for PNW-specific styles to be applied to text. The available options within the Formats menu will vary based on the type of content that is selected. Many of the PNW formats apply only to links.

To use a format, highlight the text or link to be formatted and then choose the appropriate format from the menu. To remove a format, highlight the text and reselect the same format from the menu.

Visual Editor Buttons

Row 1

  • Bold – Bold text style. (Ctrl or Cmd + B)
  • Italic – Italic text style. Should be used sparingly on the web. (Ctrl or Cmd + I)
  • Bulleted List – Start a new bulleted list, or turn selected text into a bulleted list.
  • Numbered List – Start a new numbered list, or turn the selected text into a numbered list.
  • Align Left/Center/Right – Used to align text to the left, center, or right of the container. In almost all cases, text should remain aligned to the left.
  • Insert/Edit Link – Add or edit a web link. Links can be internal to the Purdue University Northwest website, or link to an external web page. The link options dialog window allows you to search for internal pages without knowing the page URL.

  • Fullscreen – Expands the Visual Editor to fullscreen mode. Click the button again to return to the regular view.
  • Toolbar Toggle – Toggles the toolbar between one row and two rows. The second row of buttons appears or hides on toggle.
  • Insert Table from TablePress – TablePress is a WordPress extension that allows a table to be managed from one location, and then used in multiple locations across the website. Please contact the Marketing and Communications team if you need a table added to the TablePress inventory.

Row 2

  • Strikethrough – Adds strikethrough style to selected text.
  • Horizontal Line – Adds a horizontal line to the page.
  • Paste as Text – Used to remove formatting when pasting text from an external source. Click this button before pasting text into the Visual Editor.
  • Clear Formatting – Removes formatting from the selected text. Works well for formatting that was applied within the Visual Editor, and will remove some formatting copied from an external source.
  • Special Character – Opens a modal box with available special characters.
  • Decrease Indent – Decreases the indent of the selected text.
  • Increase Indent – Increases the indent of the selected text.
  • Undo – Undoes the last action in the Visual Editor. Can be used to undo multiple actions.
  • Redo – Redoes the last action in the Visual Editor. Can be used to redo multiple actions.
  • Keyboard Shortcuts – Opens a modal box with the available keyboard shortcuts.