WYSIWYG Editor

Building in the WCMS

Overview

Screen Capture of the WCMS WYSIWYG Editor

The WYSIWYG (What You See is What You Get) Editor is the easiest way to add and edit content within various modules in the WCMS while keeping within template compliance.  Inline modules can also be added within the WYSIWYG Editor to mix text with icons, media, and imagery.

You’ll find the WYSIWYG editor in modules like:

  • Text Box Module (reusable and single-use)
  • Text Block
  • Card
  • Server Side Include
WCMS Quick Facts

All icons will change color with your icon color selection

The Text tab along the top of the WYSIWYG Editor can be selected to view the markup the editor is processing

Pressing Shift+Alt+Z or clicking the Toggle Toolbar button in the WYSIWYG Editor shows more formatting options.

Working Within the WYSIWYG Editor

If you’ve ever worked within Microsoft Word or another text editor, the functioning of the text formatting options and inclusion of elements will be familiar.  Some useful tools that are unique to the WYSIWYG editor are listed below.

Insert Options:

Decorative image of bookmark

Insert > Anchor – Allows you to add an anchor ID to this portion of the page

Decorative image of a star

Insert > Icon – A selection of Icons have been curated for inclusion with design options

Decorative image for adding a page action

Insert > Add Element – Allows you to choose from a selection of other modules to include within the WYSIWYG Editor Window.  Elements like: Images, Java Script, Buttons, and others can be added this way.

Decorative image for adding new code module

Insert > Equation – Math Markup such as MathML and LaTex can be included using this element

Unique Elements:

Screen Capture of a the Badge Button Icon

Badges

A badge is a temporary visual element that can be used to indicate new priority content or to indicate when existing priority content has been updated. Each badge displays next to a link for two weeks. After two weeks, the badge disappears but the associated link remains.  For more information on Badges, click on this link to the Badges Gallery Page.

Screen Capture of the line break button icon

Line Break

In most text editors, hitting the return key generates a line break that functions like a <br> HTML markup element.  In this editor, sometimes the return key or adding the <br> markup into the raw code will not render in the page.  We’ve added the Line Break element into this editor to standardize the ability to generate a new paragraph.  This break will be reflected by the icon below.

Screen Capture of the Line Break Item Applied in a WYSIWYG Editor

Page last reviewed: February 26, 2021
Content source: WCMS / Template Team