WYSIWYG Editor

 

“What You See Is What You Get” (WYSIWYG) Editor#

The WYSIWYG Editor is a major component of your CMS, controlling large portions of content on your website. The formatting tools resemble those in common word processors (e.g. Microsoft Word). You can edit things like text formatting, in-line links, and in-line images.

Helpful Tip: Avoid over-styling blocks of text, as it can quickly become confusing to read and create visual clutter.

 

Text Formatting#

To create formatted text in the WYSIWYG Editor, highlight the desired text and select from the common formatting options (bold, italic, etc.) or the menu of custom pre-formatted options. Here are a few options:

  • HEADINGS
    Select a heading style (i.e. Heading 1, Heading 2, etc.). These are pre-formatted—based on the approved site design.
  • INLINE
    Select from common formatting options such as Bold, Italic, Underline, etc.
  • BLOCKS
    Select a style for blocks of copy (i.e. Paragraph, Blockquote,etc.). Standard body copy should be formatted as “Paragraph”.
  • ALIGN
    Select the text alignment (i.e. Left, Center, Right, Justified). Most copy on your website will be left-aligned.
  • CUSTOM
    Select custom text styles including “Summary Text”—to format page summary copy—and “Teal Color”—to style text using the brand color.

Helpful Tip: For a hard return­ —paragraph break—use the [RETURN] key. For a soft return—forcing a line break without adding paragraph formatting/spacing—use the [SHIFT] and [RETURN] keys.

 

Linking to a Web page#

  • In the WYSIWYG Editor, highlight the text you wish to link and click the icon.
  • Copy and paste a web address (URL) into the URL field.
  • Edit the Text to Display, as needed.
  • Add the Title. This will show up as a "tooltip" when hovering over the link.  This is not necessary.
  • Use the “Open link in...” dropdown to select whether the link will open in the current window or open in a new window.
  • Click “OK” and the text will be linked within the WYSIWYG Editor.
  • Make sure the Public box is checked and click Save.

Helpful Tip: Only select “Open link in... New Window” for offsite links.  

Linking to a File#

  • In the WYSIWYG Editor, highlight the text you wish to link and click the icon.
  • Select the icon to locate a file. 
  • Click the checkbox, then Insert.  Or, just click the file.
  • Edit the Text to Display and the Title as needed.
  • Use the “Open link in...” dropdown to select whether the link will open in the current window or open in a new window.
  • Click “OK” and the text will be linked within the WYSIWYG Editor.
  • Make sure the Public box is checked and click Save.