The WYSIWYG editor (What You See Is What You Get) is the main way to enter text in the Body portion of a page and format that text using the icons on the toolbar. Some of the features are the same as found in a word processing software, some are specific to editing web pages. In general, to apply functionality, highlight the desired text and then select one of the icons from the toolbar. The icons and their functions, with examples where appropriate, are listed below.
If the Toolbar is truncated, select the three vertical dots at the far right to see the rest of the tools.
Basic Text Formatting | Headings | Styles | Hyperlinks | Anchors | Pull Quotes | Insert from Media Library | Format Tables
Basic Formatting
Bold | Italic | Underline* | Strikethrough | Superscript1 | Subscript1
Align left | Align right | Align center | Justify | Insert horizontal line
Bulleted List | Numbered List | Insert Symbols
The Source icon can be used to edit html code. Not all code can be edited as the style sheet will overwite any edits to the code that are managed by the style sheet.
* The underline is not generally used on web pages since underlined content is typically a hyperlink. Avoid using it whenever possible.
Headings
Headings are found under the Paragraph Menu. To ensure ADA compliance, headings should be used to organize content, and should be used in order. The page title is always a heading 1, so the first heading on the page should always be a heading 2.
Ex: Heading 2, heading 2, heading 3, heading 2, etc. Do not skip around (Heading 2, heading 5, heading 3)
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Styles
Highlight the desired text and then select Intro from the Styles Menu
Intro: typically for introductory text on a page. This style is automatically centered and formatted with a larger font and light gray color.
Button: Highlight a hyperlink and select Button from the Styles Menu. The button will not be offered if the highlighted selection is not already a hyperlink.
Button
Create a Hyperlink
Link to any URL
- Highlight the text that will become the hyperlink
- Select the hyperlink icon
- Paste the URL in the Link URL box
- Select Insert
- Save
Link to another page on the website.
- Highlight the text that will become the hyperlink
- Select they hyperlink icon
- Start typing the name of the page to which the text should be linked, in the Link URL box
- Select the appropriate page from the list provided
- Ensure that the text shows /node/ and a number
- Select Insert
- Save
Make an email address a hyperlink
- Drupal will automatically create a hyperlink for an email address written out with the @ symbol, once the page is published.
Link text to an email address
- Highlight the text that will become the hyperlink
- Select the hyperlink Icon
- In the Link URL box type mailto:firstname.lastname@duke.edu
- Select Insert
- Save
Unlink hyperlinked item
- Select hyperlink
- Select the unlink hyperlink icon.
Link to documents on the site
- Ensure that the document has been uploaded to the Media Library
- Follow the directions for Add/Insert Document Link in Working with the Media Library
Create an Anchor
Anchors are used to link to a particular spot on a page. Linking to the anchor is a two-step process.
- Set the anchor
- Link to the anchor
Set an anchor at a particular spot on a page
Place the cursor at the beginning of the line to which the hyperlink will point
- Select the flag icon
- Name the anchor a short memorable name or acronym
- Select the green checkmark. A small red flag will appear, but will not be visible on the published page.
Link to the anchor from somewhere else on the page
- Highlight the text that will become the hyperlink
- Select the hyperlink icon
- In the link URL box type "#anchorname"
- Select Insert
- Save
Link to the Anchor from another page or another website
Highlight the text that will become the hyperlink
- Select the hyperlink icon
- Paste the URL of the page that the anchor is on into the Link URL box and add #anchorname at the end.
- Select Insert
- Save
Pull Quotes
- Select the text to be highlighted
- Select the pull quote icon
- Save
Litora inceptos ultricies sit mauris sollicitudin massa consectetur sed, Habitasse tortor dictumst aenean elementum felis dapibus laoreet leo arcu ac inceptos, Diam placerat elementum praesent eros odio lacinia habitasse porta, nulla fusce est tempor porttitor sem.
-Italicised
Insert from Media Library
Images, audio and video can be inserted into the text box, as well as in separate paragraphs. NOTE: Be sure to use the icon with the music note. The other image icon will not format correctly. Images must be uploaded and pre-sized. The editor is not yet able to size of images.
See Working with the Media Library
Format Tables
- Select Table Icon
- Select the number of rows and column desired
Tables must have headers to be ADA Compliant. They can be column headers or row headers.
Place the table header
Place the cursor in the top row or left column
- Select the row or column icon
- Mark the header.
- Add data to the table
- Save
Tables may be copied from Excel or other locations and pasted into the WYSIWYG editor. Table headers don't generally transfer so they must be manually added.
The Width of the table will expand with the length of the text until the table is the width of the page
| Column Header | Column Header |
|---|---|
| Row Header | Content |
| Row Header | Content |