The editor toolbar (pictured above) includes most most of the functionality needed when editing webpage content, including:
Highlight text and select the Bold icon to apply a bold emphasis to text
Highlight text and select the Italics icon to apply an italic emphasis to text
Indent or remove indentation from a paragraph
This style is used to identify long quotations. For example:
Swarthmore students are expected to prepare themselves for full, balanced lives as individuals and as responsible citizens through exacting intellectual study supplemented by a varied program of sports and other extracurricular activities. The purpose of Swarthmore College is to make its students more valuable human beings and more useful members of society. Although it shares this purpose with other educational institutions, each school, college, and university seeks to realize that purpose in its own way. Swarthmore seeks to help its students realize their full intellectual and personal potential combined with a deep sense of ethical and social concern.
Show Block Elements
This feature can be a very helpful tool when your page formatting is off and you are having difficulty figuring out what is going on. The tool creates an outline of all the block elements (remember, these are things like paragraphs, bullet lists and div elements). When this button is clicked it will put a subtle outline around each block element and identify the type of HTML element it is.
Note in the example below there is an empty paragraph which I may not have noticed had I not used this tool.
There are two ways to present lists using the Editor: bulleted or ordered. To begin a list place your cursor on a new line and click one of the two list buttons. If you need to nest a list item, place your cursor on the line you'd like to nest and click the Indent button.
This type of list does not imply any specific order or hierarchy. Customize the bullets by right-clicking on a specific list item to access its properties.
- Nested item
This type of list explicitly sets the order and/or importance of the content. Alter the style of a particular list item (e.g.. upper/lower Roman numerals, numbers, upper/lower alpha) by placing your mouse on a particular item and right-clicking.
Text and Heading Formats
This drop-down list is used to structure the content of a page. Properly formatting text can help visitors, search engines, and screen readers interpret the content.
To change the format of a block item such as converting normal, paragraph text into a heading tag, place the cursor at the beginning of the text and choose the appropriate heading size from the drop-down menu. Note: This change will affect the entire block, not just a piece of that block. If you are uncertain what text the block includes use the "Show Blocks" button to outline all the blocks on the page.
When working with headings, make sure to follow a logical order. This will be particularly useful to visitors browsing via screen-reader software.
Custom Text Styles
This drop-down allows you to apply visual styles to an element without altering it's markup. For example, if you have a heading level 2 (h2) element, but you'd prefer that it to looked like a heading level 3 (h3) while preserving the original element (h2), this is the tool for you.
To change the look of an element, highlight the text and choose the appropriate style from the drop-down menu.
Subscript and Superscript
Subscripts and superscripts are most often used in mathematical expressions or footnote references. Subscript is a character that is slightly smaller than the text that surrounds it and is set below the baseline. It is the first button in this set.
Superscript is very similar to subscript only it appears above the baseline. It is often used in mathematical expressions to denote power or the numerator part of a fraction. In normal text superscript often directs a user to a footnote. It is the second button in this set.
It can be difficult to insert special characters into your copy if you're not familiar with HTML. This option allows you to choose from a list of commonly used special characters and insert them in the location of your cursor.
Spellcheck is activated by default. If you see a red underline in the editor area, you may have a spelling error in your content.
Links and Anchors
Highlight the text you wish to use as the link text (this text should provide clear context to the visitor as opposed to something like "click here" or "more"). Then choose the "chain icon" to reveal a window with the following options:
- Link to a Swarthmore page
- Link to a URL (e.g.. a non-Swarthmore page) or a document
- Link to an anchor within the text of this page
- Link to an email address
Each has its own options as described below.
Link to a Swarthmore pages
To link to an existing (published) Swarthmore page simply start typing the page title in the Link area. As you type, Drupal will attempt to auto complete the page title by providing a list of pages containing the word you've started to type.
Link to URL or link to document
Copy the URL from the page you want to link to and paste it in the URL area. The dialog will automatically adjust the Protocol dropdown. Under "Target" choose "New Window."
Use the Browse Documents button to open the document file browser. Upload or select a document.
Link to an Anchor in the text
Links to anchor tags allow a visitor to jump to a specific area of a page, commonly a section heading. Note that this method requires the presence of an anchor tag. See instructions on Creating Anchors as necessary
- Choose "Link to an Anchor in the text."
- Under Select an Anchor choose By Element Id.
- Select the appropriate Element ID
Link an Email
In addition to adding an email address, editors may add a "Message Subject" and a "Message Body". This may be useful in gathering additional information, or if you want to sort your emails by subject (e.g.. the message subject in the contact block email link could be 'From web contact block", while the message subject within text could be 'Inquiry from Apply to Swarthmore').
To create an anchor, click the last link button (it is marked with the image of a flag). Anchors are typically placed at the beginning of the section heading or paragraph you want to jump to. The only requirement is to add a name for the anchor - the name should be one word and contain no spaces. Examples of good anchor names are:
You will know you've successfully created an anchor when you see a red flag appear in the Editor (this red flag will not be visible to the public). If you need to edit the anchor name, you can click on that flag and the Anchor dialog will reopen.
The last button in this grouping is the "Remove Formatting" button. It looks like the underlined capital T with an x subscript. It is an easy way to remove any behind the scenes formatting which may have been inadvertently brought in during a paste operation.
Undo/Redo, Search, Find and Replace
The first button in this grouping is the "Undo." It looks like a left-facing curved arrow. It is a quick way to cancel the recently introduced change and restore the document to its previous state. The keyboard shortcut is ctrl + Z on Windows, and Command + Z on a Mac.
The second button in this grouping is the "Redo" button. It looks like a right-facing curved arrow. It lets you revert the last undo operation. The keyboard shortcut is ctrl + Y on a Windows machine, and Command + Y on a Mac.
The third button in this grouping is the "Search" button. It looks like a magnifying glass and allows you to search for a phrase or word.
The fourth and last button in this grouping is the "Find and Replace" button. It looks like an "a" being replaced by a "b" or a "b" being replaced by an "a." Because these are so closely related there is one tabbed dialog box where you can chose to "Find" or to "Replace" a particular word or phrase which match using various criteria in the dialog box. You can also perform batch changes by finding and replacing multiple occurrences of a phrase with just one mouse click instead of manually finding and modifying each one of them.
Note: The default option is to "Match Cyclic," which means the process will start at where the cursor location is and when it reaches the bottom of the document, it will go to the top and keep going until you reach the cursor location again.
Use this button to open the table dialog box.
When creating a table you must select Headers and a Caption. Both of these fields are critically important - they not only make tables more understandable and readable, they also help persons with disabilities understand what the table is about.
Table Properties Tab
Rows and Columns
Select the initial number of rows and columns to add. This can always be modified later.
Select from the following options:
- Basic - a generic table with a white background
- Zebra - a table that has rows differentiated by alternating between white and gray background colors
- Sort - a table that allows you to sort columns by the values within
- Text - a table with no visible cell borders – useful for information that should blend in with your body copy
Choose whether your first row, first column, or both are to be used for the table headers.
A caption gives a quick high level definition of what the entire table is about (e.g.. 2016 Financial Aid Deadlines, Fall Semester Courses).
If you want to go the extra mile, the SUMMARY field provides a literal description of the table (e.g.. 4 columns, 5 rows, first row is the heading row, headings are Course Number, Course Description, Taught By).
It is rare that you'll need to use this tab however if you need to add an id, custom styles, or change the language directions. this is where those options can be found.