The bulk of the text content on the page editor is managed through the WYSIWYG editor.
WYSIWYG stands for what you see is what you get. The WYSIWYG editor is an interface that allows you to see a basic representation of what your live page will look like—as you create it.
Toolbar
The WYSIWYG editor contains two main elements: the toolbar and the text box. The toolbar allows you to format your text, add images, link to documents or other websites, insert anchors, create tables and view and edit the HTML source.
Use the table below for a quick reference on the function of each item in the WYSIWYG toolbar. If you would like additional tips and tricks for how to use the options provided in the WYSIWG, please view the content highlighted below the table.
| Name | Function |
|---|---|
| Bold | Applies bold styling to text. |
| Italic | Applies italic styling to text. |
| Superscript | Makes text smaller and places it to the top right of the text before. |
| Subscript | Makes text smaller and places it to the bottom right of the text before. |
| Remove Format | Removes previously applied formatting from text. |
| Increase Indent | Increases the indent in a bulleted or numbered list. |
| Decrease Indent | Decreases the indent in a bulleted or numbered list. |
| Paste as Plain Text | Pastes text and does not retain formatting. |
| Universal Link | Creates a link to a page outside of your site (this includes other case.edu sites), anchor points on your site, or email addresses. |
| Internal Link | Creates a link to a page on your site that is in Drupal or a file that is in the media library. |
| Remove Link | Removes a hyperlink from the text but leaves the text itself. |
| Anchor | Sets anchor points within the text on the page. |
| Bulleted List | Creates an indented list with bullets. |
| Numbered List | Creates an indented list with numbers. |
| Insert Media | Embeds images from the media library. |
| Table | Inserts a table. |
| Video Embed | Places a video from Youtube or Vimeo in the content that can then be streamed on the page. |
| Block Quote | Applies block quote styling to the selected text. |
| Horizontal Line | Inserts a horizontal line. |
| Formatting Styles | Changes text format for headers, body text and buttons. Buttons only apply to links. |
| Source | Switches to HTML editor. |
Text Formats
Bold
Bold styling should only be used for emphasis on key words or phrases within a paragraph and not in place of headers. If you find yourself starting a new paragraph or section on a page with a bolded word or line, it may be best to translate the bolded section into an appropriate header style instead.
Italic
Italic styling is typically used just for publications and book titles in order to follow the university’s AP styling. Learn more about the editorial style guide.
Block Quote
While styled differently than other text formats, block quote styling should only be used when calling out a quote from another source, and not only for styling purposes. Block quote styling is used by screen readers to help identify when a quote is added to a page.
Remove Formatting
To use the Remove Format button, highlight the text you would like to remove the formatting from and then select the Remove Format button from the WYSIWYG.
Please note: Using the Remove Format button does not replace pasting as plain text when copying content from another source.
Paste as Plain Text
When working with text from another source, such as a PDF or Word document, the preferred method to paste this content into the website uses the Paste as Plain Text button in the WYSIWYG Toolbar.
- Copy text from source.
- Click on the Paste as Plain Text button in the WYSIWYG toolbar for instructions on how to paste.
- On your keyboard, press CTRL+Shift+V on Windows or Command+Shift+V on Mac
Linking Options
Universal Link
A universal link is the link with the plus (+) sign and allows you to link to external URLs, such as to google.com or another university website. You can also use universal links to link to an email address.
Internal Link
Internal links are used for linking to pages on your website or to link to documents you have uploaded to the Media Library. By using the internal link option, Drupal will automatically make sure your link doesn’t break if the page you are linking to has a name change or the location of the page changes.
Insert Media
The Insert Media option in the WYSIWYG allows you to embed an image that has been uploaded to your Media Library previously.
- In the WYSIWYG editor, click where you would like the image to appear on the page.
- Select the Insert Media button, and select the image you would like to use from your Media Library.
- Choose the size you would like the image to be (Small, Medium, Large, or Original size) and choose if you want the image to be left-aligned or right-aligned with the text (or not at all).
- Click Embed to add your image to the page.
Table
Tables should only be used to quickly compare and contrast data on a page and should not be used for styling purposes only. Tables also need to have a header row or column applied to assist with accessibility.
Horizontal Line
Horizontal lines are used to provide some additional style for separation between two different ideas or pieces of content on a page. It is generally recommended to add a new heading after the horizontal line to assist with the separation of ideas.
Formatting Styles Dropdown
Headings
Headings can be changed under the Formatting Styles dropdown in the WYSIWYG.
Highlight the text you would like to make into a heading, and then click the Formatting Styles dropdown in the WYSIWYG. From here, you can select the heading you would like to apply.
If you would like to remove a heading style, highlight the text and then click the Formatting Styles dropdown menu. Scroll up and select the option for ‘Normal’. This will remove the heading style previously applied to the highlighted text.
Please note: Heading tags are used for headings only and not for emphasis within normal text. Bolded text should be used for emphasis, and not in place of headings.
Learn more about using headings.
Buttons
Buttons can be used to call more attention to your link. These can be applied under the Formatting Styles dropdown in the WYSIWYG.
- Highlight the linked text you wish to apply the style to (text must already be linked).
- Choose a button style from the Styles drop-down menu.
- Once you select a style, you should see the button when you view the page in live mode—either in preview or after publishing.
Note: If a link is removed, the button styling will automatically be removed with it. You can add the button style back once a link is added again.