WYSIWYG 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.

What You See Is What You Get tool bar

Basic text formatting

Bold and Italics buttons in WYSIWYGThe 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 buttons in WYSIWYGThe default text alignment is left justified. On rare occasions, you may need to use the Align Center button to center your text.

Centered text

Lists

Ordered list button in the Drupal editorOrdered 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
List buttons in the WYSIWYGUn-ordered lists
  • Aliquam tincidunt mauris eu risus
  • Vestibulum auctor dapibus neque
  • Nunc dignissim risus id metus

Increasing and decreasing indentation

Buttons on Drupal editor to increase or decrease list indentationWithin your ordered or un-ordered list, you can increase or decrease the indentation.

Undo

Undo WYSIWYG ToolbarYou can undo the last change made (before saving).

Adding and editing links

Paragraph WYSIWYG Toolbar

You can link to a webpage external to your website to selected text. Also used to edit a current link.

Removing links

Unlink WYSIWYG 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 WYSIWYG ToolbarYou can link text at the top of the page to corresponding text further into the page to minimize scrolling.

LinkIt

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 WYSIWYG Toolbar

Dropdown menu used when formatting text.

Styles dropdown

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

Superscript and subscript

Superscript and subscript WYSIWYG ToolbarYou can add superscriptexample or subscriptexample to text.

HTML editor

HTML WYSIWYG ToolbarWhen you click on the HTML button, another window will open to reveal the HTML code on the page. 

Insert horizontal line

Horizontal Line WYSIWYG ToolbarYou can insert a horizontal line to delineate page sections. Like this:


Remove formatting

Remove Formatting WYSIWYG ToolbarRemove 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 WYSIWYG ToolbarInsert special characters not found on your keyboard. 98.7°, for example.

Pasting options

Text Pasting WYSIWYG ToolbarPasting plain text (left) and pasting from Word (right) can be used to remove any source formatting.

Spellcheck

Spellcheck WYSIWYG ToolbarYou 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

Insert Media WYSIWYG ToolbarYou can directly insert images or video using this tool. 

Tables

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

Insert table

Table WYSIWYG ToolbarInsert table, use pop-up to edit number of rows and columns.

Insert row before, after, and delete

Row Editor WYSIWYG ToolbarInsert a row before (left), after (middle), or delete (right) the selected row.

Insert column before, after, and delete

Column Edits WYSIWYG ToolbarInsert a column before (left), after (middle), or delete (right) the selected row.

Split and merge cells

Table Cell WYSIWYG ToolbarSplit (left) selected cells in a table, merge (right) selected cells in a table.