WYSIWYG (which stands for "What you see is what you get") is the editing interface that you will use for body fields and some text fields.

You may have used a similar editor on other sites before, and even if not, many of its functions will probably be familiar from other tools like Microsoft Word.

The WYSIWYG field will expand as you add content, so there is no need to manually resize it.

Important WYSIWYG Features

  1. Styles [1] dropdown: This allows you to add headings: H2, H3, H4, H5, and H6.
    • H1 is reserved for page titles.
    • Headings represent hierarchy and should be used in order to demonstrate content priorities for accessibility.
    • See Heading Styles Visual Guide below.
  2. Remove Formatting [2]: Highlight text and select this button to remove formatting. This is helpful when copying/pasting text from other sources that might bring in text formatting that is not needed.
  3. Link [3]: Link to existing content (internal links) within the site, or add an external link.
    • Internal links: Start to type the name of the page or piece of content that you wish to link to; select it from the auto-suggest dropdown. Important for helping with broken links.
    • External links: Insert the entire URL in this link field.
    • Email addresses: You can simply add an email address along with other text and Drupal will automatically link the email address so that it opens in a user's mail client. Alternately, you can add an email address in this link field which will recognize that it is an email address; select it from the auto-suggest dropdown.
  4. Remove link [4]: If you need to remove a link, highlight the text and select this button. Simply deleting the link and words doesn't guarantee all of the code is removed.
  5. Anchor link [5]: Use this to link to a specific location on a page.
  6. Bullets [6]: Unnumbered and numbered bullets. Use frequently.
  7. Add media [8]: Upload new media or find existing media in the pop up Media browser.
  8. Block quote [7]: Use to add a block quote style to text
  9. Horizontal rule [9]: Add a horizontal rule between text or other elements.
  10. Source [10]: Shows source code. Good way to check your work if something looks off.
  11. Alignment [11]: Left, center, and right alignment options.
  12. Add a table [12]: Use sparingly. Large tables are more challenging to navigate on mobile devices.
Screenshot showing the WYSIWYG content editor

Heading Styles Visual Guide

The following heading styles are available to you in the WYSIWYG Styles dropdown.

  • Heading 2

  • Heading 3

  • Heading 4

  • Heading 5
  • Heading 6