WYSIWIG Toolbar

You, the web editor, will be tasked with making your webpages easy to read. One way to do that is to format and add styles to the text and images via the WYSIWYG editor.

Using the Drupal toolbar

What You See Is What You Get (kind of...)

Like most Content Management Systems, Drupal has a What You See Is What You Get (WYSIWYG) editor. When you format your text within the editor, the finished product will be similar but not exact.

The way the text displays within the editor doesn't include the styles included in the Nokomis Cascading Style Sheet (CSS) so the headers in the editing window won't include the same font, color, and other text treatment. After you have added or edited text in the editor and you hit "save," you'll be able to see the page as it will be displayed for your users.

Toolbar tour

Similar to the toolbar found in Word or Google documents, the Drupal WYSIWYG includes buttons that will format your text.

WYSWIG toolbar

Basic text formatting

Bold and Italics WYSIWIG buttons The left side of the WYSIWYG toolbar includes a button for bold and a button for italics. Use this formatting to place emphasis on text or to properly format titles of works.

Alignment

Alignment WYSIWIG button The default text alignment is left justified. On rare occasions, you may need to use the Align Center button to center your text.

Lists

Ordered list WYSIWIG button Ordered lists otherwise known as numbered lists
  1. Instructions are easier to understand in ordered lists
  2. Copy the text you want in an ordered list
  3. Then click on the "Insert/Remove Numbered List" button in the WYSIWYG
unordered list WYSIWIG button Un-ordered lists
  • Aliquam tincidunt mauris eu risus
  • Vestibulum auctor dapibus neque
  • Nunc dignissim risus id metus

Increasing and decreasing indentation

Indent buttons on WYSIWIG toolbar Within your ordered or un-ordered list, you can increase or decrease the indentation.

Undo

Undo button on WYSIWIG toolbar You can undo the last change made (before saving).

Adding and editing links

Add link button on WYSIWIG toolbar You can link to a webpage external to your website to selected text. Also used to edit a current link.

Removing links

Unlink button on WYSIWIG toolbar Used to remove a link from text.

Target:
  • Select "Open in the same window" when you are linking to anything at a umn.edu web address (University of Minnesota content)
  • Select "Open link in a new window" when you are linking to anything outside of umn.edu, an application, or anything without a back button
Anchor

Anchor button on WYSIWIG toolbar Anchor WYSIWYG ToolbarYou can link text at the top of the page to corresponding text further into the page to minimize scrolling.

LinkIt

Linkit button on WYSIWIG toolbar LinkIt WYSIWYG ToolbarUse LinkIt to link to content (e.g. a page or document) that exists on your site. This helps avoid broken links when content changes.

Paragraph dropdown

Paragraph dropdown menu on WYSIWIG toolbar

Dropdown menu used when formatting text.

Styles dropdown

Styles dropdown menu

Dropdown menu used to format images, quotes, and buttons.

Superscript and subscript

Superscript and subscript buttons on WYSIWIG toolbar You can add superscriptexample or subscriptexample to text.

HTML editor

HTML button on WYSIWIG toolbar When you click on the HTML button, another window will open to reveal the HTML code on the page.

Insert horizontal line

You can insert a horizontal line to delineate page sections. Like this:


 

Remove formatting

Remove formatting button on WYSIWIG toolbar Remove source formatting (we like to say "yucky code") from pasted text. This will remove all formatting (headings, bold, etc) but not links.

Special characters

Special characters button on WYSIWIG toolbar Insert special characters not found on your keyboard. 98.7°, for example.

Pasting options

Pasting options buttons on WYSIWIG toolbar Pasting plain text (left) and pasting from Word (right) can be used to remove any source formatting.

Spellcheck

Spellcheck button on WYSIWIG toolbar You can spellcheck as you go or select an area of text to spellcheck to avoid mistaeks, like this one. It will underline errors with a red, dotted line.

Add media

Add media button on WYSIWIG toolbar You can directly insert images or video using this tool.

Tables

Tables can be inserted, edited, and styled using the Drupal WYSIWYG.

Insert table

Table button on WYSIWIG toolbar Insert table, use pop-up to edit number of rows and columns.

Insert row before, after, and delete

Insert row before, after, and delete button on WYSIWIG toolbar Insert a row before (left), after (middle), or delete (right) the selected row.

Insert column before, after, and delete

Column edit buttons on WYSIWIG toolbar Insert a column before (left), after (middle), or delete (right) the selected row.

Split and merge cells

Table cell buttons on WYSIWIG toolbar Split (left) selected cells in a table, merge (right) selected cells in a table.