WYSIWYG component - Concordia University

Uses

The WYSIWYG is the component we most often use to present text on an AEM page.

You can add a WYSIWYG component directly to a page. You can also add a WYSIWYG to various other components, e.g. to an Accordion panel, Box or Column control.

WYSIWYG stands for What You See Is What You Get - because the way the text looks in the editing window is the way it'll look on the page.

When you open a WYSIWYG for editing, you'll see a toolbar with standard text editing tools.

Screenshot of WYSIWYG component, showing text editing tools at top

These include:

Cut, copy and paste
Bold and italics
Text alignment
Hyperlinks, including the anchor link
Bulleted and numbered lists
Paragraph indent
Special characters (the star icon) - includes French accents, ©, ™, etc.
Source edit - shows the HTML source code
Text style and format

Best practices

Using text from Word

Using text from Word can be a bit tricky in AEM. If you don't do it right, it'll bring in excess code that may disrupt your AEM page.

This short video shares the best way to bring in text from Word:

Format and style

Use sentence case for headings, e.g. Best practices (rather than Best Practices). People can read sentence case faster than title case.
When the Format is a heading, set the Style to None.
When the Format is Paragraph text, set the Style to X-Large Text, so it's easy to read.
If you have any footnotes on your page, set their style to Footnote.
Use one only space after a period.

Accessibility

Add proper headings within the WYSIWYG. Headings make the content accessible for screen readers and easier for everyone to scan.
Using line breaks, empty paragraphs or empty WYSIWYGs to add space creates accessibility problems. If you'd like to add space to your page, use the separator component, which maintains accessibility.