Use the Editing Toolbar (WYSIWYG)

A WYSIWYG (what you see is what you get) editor allows content managers to edit text similarly to how they would in an application like Microsoft Word.

The WYSIWYG appears at the top of most form text areas when editing content. A user may highlight text within the text area and click the appropriate button to apply or remove a style.

Pressing ‘Enter’ or ‘Return’ creates a paragraph break. Paragraphs have a full line of bottom margin to increase text readability. To create a single line break, hold Shift while hitting Enter. Keyboard shortcuts for cut (Ctrl + X), copy (Ctrl + C), paste (Ctrl + V), and undo (Ctrl + Z) also work.

Inline formatting options

bold, italic

Block formatting options

  • left align text (default and highlighted)
  • center align text

Lists

  • bulleted list (highlight multiple paragraphs and convert to a list)
  • ordered (numeric) list
  • out-dent/indent (used for nested lists)

Links

insert/edit link (more later in Linking within Text)
remove link (only an option when on an existing link)
anchor – places a named bookmark that you can link to within long pages

Images

insert image (more later in Images)

Block elements

blockquote (indented text with quotes in the background)
paragraph style dropdown (normal is the default, can use to create headings)

When using a block element, you are converting a regular paragraph into a different type of element – a blockquote or a heading – not just applying a style. This is an important distinction when working with the styles dropdown.

The easiest way to select an entire block element is to click on the element link in the bottom of the WYSIWYG editor. (See image below.) This will select the entire element, and only that element, without needing to try to make sure you clicked in the correct place.

Styles dropdown: (see Special Styles)

Additional options

View HTML source

Alternative: disable rich-text using ‘disable rich-text’ link.

horizontal rule (creates line separator)
Paste from Word (more later in Copying from Word or the Web)
remove formatting use to remove styles applied with the style dropdown
enable spell check
teaser break (more later in Summary Text)

Click here to view a full style guide for all the elements available through the WYSIWYG.

Copying from Word or the Web

If you are copying existing content into Drupal, it’s important to strip the styles and excess HTML code from the original content. There are two main ways to do this.

A 100% foolproof way to copy text without including any unwanted code is to temporarily disable rich-text by clicking the ‘Disable Rich Text’ link below the text area, paste your text into the text area, re-enable rich-text by clicking the link again, and then re-format your content. This will guarantee that you remove all extra formatting, but you will also lose good formatting like paragraph breaks.

As a compromise to remove the worst formatting offenders, you can use the ‘Paste from Word’ button when pasting text from Word or the web. If you are using Firefox, direct pastes into the text area will apply the Paste from Word filter automatically.

Linking within Text

There are two types of links in web sites: absolute links and relative links.

The absolute link for a site is the entire URL that you see in the web address bar at the top of a browser window.

An absolute link includes the domain of a site (e.g. artsci.wustl.edu). Use absolute links when linking to pages outside of the site in which you are working.

A relative link is relative to the current page you are on. If you are already within a Drupal site and need to link to another page within that same site, you only need to include the portion of the URL that is different. E.g. a relative link to http://artsci.wustl.edu/about would be ‘/about’. Links to files or pages within the same site should always start with a slash ‘/’.

To insert a link, highlight the text that you wish to link and click the "link" button above the text area in which you are working.

To edit an existing link, select the link and click the same button. In either case, a pop-up will open like the one below. Add your relative or absolute link in the URL box and click OK.

Link type will generally be URL, but if you have added anchors to your page, you can also link to those. Just change link type to ‘Link to anchor in the text’ and select your named anchor from the ‘by anchor name’ dropdown.

To remove a link, select the link you wish to remove, and click the "broken link" button above the text area in which you are working.

If you want to link to a file such as a PDF, click on the ‘Browse Server’ button. For more information about files, please see the next section.