Image
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
- 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.
- 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.
- 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.
- Edit or remove link: Click the linked text within the editor to access a menu for editing or removing an existing link.
- Anchor link [4]: Use this to link to a specific location on a page.
- Bullets [5]: Unnumbered and numbered bullets. Use frequently.
- Add media [6]: Upload new media or find existing media in the pop-up Media browser.
- Alignment [7]: Left, center, and right alignment options.
- Block quote [8]: Use to add a block quote style to text
- Horizontal rule [9]: Add a horizontal rule between text or other elements.
- Add a table [10]: Use sparingly. Large tables are more challenging to navigate on mobile devices.
- Source [11]: Shows source code. Good way to check your work if something looks off.
- Text checker [12 & 13]: Spell check and basic grammar review. Recommendations appear automatically within the content field.
- Accessibility checker: Appears in lower right of your edit screen, with specific recommendations also appearing inline in your content editor.
Image
