The WYSIWYG Text Editor
When you edit a page, you will see this toolbar menu that provides a "What You See Is What You Get" (WYSIWYG) method of structuring your content in the page. The menu provides a word processor-like interface for inputting and formatting content. If you are comfortable with raw html, you can click the "Source" button or click “Disable rich-text” below the WYSIWYG ribbon to edit the html code (sometimes this is the only way to accomplish complicated layouts).
The WYSIWYG toolbar has “MS Word-like” buttons to align and style text as well as add links, insert and upload images. One of the most important features is the paste from MS Word (the button that looks like a clipboard with a Word icon on it – W letter). If you are cutting and pasting directly from an Microsoft Office document it is important to use the paste from Word feature to strip extraneous Microsoft code from the clipboard contents.
For each option in the toolbar, you can roll over the icon to read the rollover text to see that action each accomplishes.
Bold, italic, Superscript, Subscript, Remove formatting buttons.
Align left, center, and right.
Bullets, Insert/Remove numbered list, decrease indent, increase indent and block quotes.
Undo, Redo, insert text, insert Word content.
Use "Linkit" to link to internal content, add a hyperlink, Unlink, and add an Anchor link.
The Source button is a toggle that shows the html code versus the WYSIWYG display.
Use the Check Accessibility (person in circle) icon to check that your text is properly formatted to meet accessibility requirements.
Use the Set Language when entering non-English text. This allows a screen reader to recognize text as another language and properly read it aloud. Highlight your text and select the language from the dropdown. It will add code around the text that is invisible to you. To see the code, click the Source icon.
This grouping adds a hard return, a special or foreign character, and a table.
A hard return is a line that breaks up text on your web page. In HTML, this is an <HR>.
The Omega symbol is used to add special or foreign characters. Use the Omega symbol to enter the following characters (and more) into the body of text. To enter them into the Title field, you will need to use the keyboard or cut and paste.
Tables can be aligned left, center, or right. If you right-click any table in the WYSIWYG editor, you can open the Table Properties dialog, which allows you to convert the first row or column into headers, add a caption, and adjust other properties.
Use Heading styles in order to create structure for an accessible site. Select the text and choose a Heading style defined by the theme. It's best to choose an H2 for your pages since each page should only have one H1. Avoid the use of bold for headings.
These two options are used to embed images into the web page as well as style the images to float left, right or center. See detailed instructions for embedding and stylizing images to learn more.
There may be occasions when you wish to call attention to text at the beginning of your Basic Page, News story, Events, etc. Sometimes this text is called "kicker" text or "callout" text. It's used to underscore the Title of the item. Its formatted to standout from the rest of the body text.
To show Callout text:
- Edit a node.
- Click "Edit summary" under the Title.
- Enter Summary text.
- Check the checkbox for "Display summary text as a callout".
- Click "Save".
As usual, summary text will also be displayed in lieu of truncated body text in any list that contains this page.
When editing a page, you may notice that some words have a red underline. This indicates that your browser's spell checker has found a word that may be misspelled.
To see the suggested alternate spellings:
- Cmd + Click (Mac)
- Ctrl + Click (Windows)
Then select the alternate word.