WYSIWYG

Use the WYSIWYG when you need rich body copy with headings, lists, and links from the RTE.

AEM publisher guidelines

View the component in Figma

Live demo

Visitors read flowing narrative content with clear hierarchy from headings and lists. Content authors should follow the RTE profile (what the toolbar allows) and avoid tables for layout or tiny all-caps text. Visual designers rely on rte styles for spacing and type; optional additional classes are for rare layout hooks.

Behaviour

  • Published output is the authored HTML inside a div.rte wrapper.
  • Allowed tags and styles depend on the RTE profile configured for the deployment.

Anatomy

  1. Wrapper div with typography and spacing from design system LESS.
  2. Authored content from the editor.

WYSIWYG typography (placeholder)

Replace with sample heading, list, and link styling.

Content guidelines

  • Use headings in order (h2 then h3, not skips without reason).
  • Use lists for true lists, not manual bullets.

Best practices

Do

  • Structure content with semantic headings and lists.
  • Paste from external sources through plain text or clear formatting when the toolbar allows.

Don't

  • Don't paste from Word without cleaning formatting; it adds inline noise.

When to use

  • Body copy, FAQs, and long-form sections that do not need a bespoke layout component.

When not to use

  • Structured data (tables with semantics); consider Table or custom components.
  • Hero or callouts; use Introduction, Offset block, or Card.

CRXDE Lite query

Use this query in CRXDE Lite to find instances of this component.

/jcr:root/content//*[@sling:resourceType = 'concordia/components/wysiwyg/wysiwyg.jsp']

Technical behaviour

wysiwyg.jsp is minimal: cq:text outputs the text property inside div.rte. Authors use the Rich Text Editor toolbar for headings, lists, links, and inline styles allowed by the RTE profile.

Authoring fields

Field Purpose
Text Main RTE body.
CSS class Optional additionalClass on the wrapper.

Instances in the codebase

Location Notes
apps/concordia/components/wysiwyg/wysiwyg.jsp Implementation.
Item Location
Component apps/concordia/components/wysiwyg/wysiwyg.jsp