WYSIWYG

Design options

The WYSIWYG text editor features a toolbar with standard text editing tools:

• Cut, copy and paste
• Bold and italic formatting
• Paragraph formatting and text alignment
• Hyperlinks
• Bulleted and numbered lists
• Text style and and heading formats 

Other useful features include:

• The star button to quickly insert special characters or French accents
• The Source button to toggle between the html source code and the what-you-see-is-what-you-get display
• The anchor button to be used with a hyperlink

Other functions let you paste in plain text (stripping out all formatting) or paste from Microsoft Word (stripping out unnecessary and hidden Word formatting).

Guidelines

General use and rules of thumb.

• Don't use the default text size; it is too small.
• Use the Large text formatting on right-sidebar template pages
• Use the X-Large text formatting on full-width and full-browser template pages (like this one)
• If you have images to present alongside your text, use the Image & Text component

To set the text style

1. Select the paragraph
2. Click on the Style dropdown option and choose Large or X-Large.

Accessibility

Headings provide structure to your web text content. They break up your text into smaller chunks to make it easier to scan and make accessible for screen readers. 

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Note that Heading 1 is not available in the WYSIWYG component. H1 should only be used for page titles.

Examples & use cases

Helpful tips & "gotchas"

• Remove H1 and underline formatting from Word before you copy/paste into AEM; these are not supported in the WYSIWYG
• Be mindful if you are pasting content that has been translated; you may see extra code that must be removed

Training

Covered in Basic Training (in-person or Self-directed option).