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.
Basic text formatting
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
The 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 lists otherwise known as numbered lists
- Instructions are easier to understand in ordered lists
- Copy the text you want in an ordered list
- Then click on the "Insert/Remove Numbered List" button in the WYSIWYG
Un-ordered lists
- Aliquam tincidunt mauris eu risus
- Vestibulum auctor dapibus neque
- Nunc dignissim risus id metus
Increasing and decreasing indentation
Within your ordered or un-ordered list, you can increase or decrease the indentation.
Undo
You can undo the last change made (before saving).
Adding and editing links
You can link to a webpage external to your website to selected text. Also used to edit a current link.
Removing links
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
You can link text at the top of the page to corresponding text further into the page to minimize scrolling.
LinkIt
Use 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
Dropdown menu used when formatting text.
Styles dropdown
Dropdown menu used to format images, quotes, and buttons.
Superscript and subscript
You can add superscriptexample or subscriptexample to text.
HTML editor
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 source formatting (we like to say "yucky code") from pasted text. This will remove all formatting (headings, bold, etc) but not links.
Special characters
Insert special characters not found on your keyboard. 98.7°, for example.
Pasting options
Pasting plain text (left) and pasting from Word (right) can be used to remove any source formatting.
Spellcheck
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
You can directly insert images or video using this tool.
Tables
Tables can be inserted, edited, and styled using the Drupal WYSIWYG.
Insert table
Insert table, use pop-up to edit number of rows and columns.
Insert row before, after, and delete
Insert a row before (left), after (middle), or delete (right) the selected row.
Insert column before, after, and delete
Insert a column before (left), after (middle), or delete (right) the selected row.
Split and merge cells
Split (left) selected cells in a table, merge (right) selected cells in a table.