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.
WYSIWYG Editor Update
The WYSIWYG Editor within our instance of Drupal was updated to a new version of CKEditor in early March 2026. Some options within the WYSIWYG editor have changed. Please review this page for WYSIWYG updates.
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. |
| Link | Creates a link within your page content. |
| Bookmark | Previously called 'Anchor'. Sets bookmark 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 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. |
| Paragraph Styles | Changes text format for headers and body text. |
| Text Styles | Adds button styles to selected linked text. 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.
Linking
You have the ability to link to other pages on your website, a file uploaded to the Media Library, anchor points on your webpage, other website URLs, or email addresses. When linking to a page or document on your website, we recommend to use Drupal’s built-in linking feature to ensure your link doesn’t break if the page you are linking to has a name change or the location of the page changes. Learn more about linking in Drupal.
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 be compliant with accessibility guidelines.
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.
Paragraph Styles Dropdown
Headings can be changed under the Paragraph Styles dropdown in the WYSIWYG. To add a heading to your page:
- Highlight the text you would like to make into a heading.
- Click the Paragraph Styles dropdown menu and select the proper heading style you would like to apply.
To remove a heading from your page:
- Highlight the heading text in the WYSIWYG
- Click the Paragraph Styles dropdown menu
- Select the option for "Paragraph." 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.
Text Styles Dropdown
Buttons can be used to call more attention to your link. These can be applied under the Text Styles dropdown in the WYSIWYG.
To add a button to your page:
- Highlight the linked text you wish to apply the style to (text must already be linked).
- Choose a button style from the Text Styles dropdown menu.
To remove a button from your page:
- Highlight the button in the WYSIWYG
- Click the Text Styles dropdown menu
- Re-select the button style
Please 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.