The editor toolbar (pictured above) often accompanies large editable text fields in Drupal. The the combination of an editor toolbar and editable text field are referred to as the Copy Editor. Although the typical editor toolbar will feature all of the options described below, there are some cases where a feature has been intentionally omitted. If you encounter any issues while working with the copy editor, please email email@example.com.
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 helpful when your page formatting is off and you're having difficulty figuring out what's causing the issue. This tool creates an outline of each block element (paragraphs, lists, divs, etc.) and identify the HTML element type.
Note: In the example below there is an empty paragraph which would have been difficult to detect without use of the Show Block Element tool.
There are two types of lists offered by the Copy Editor: Bulleted Lists and Numbered Lists. 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 found in the editor toolbar.
This type of list does not imply a specific order of importance. 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 page
To link to an existing (published) Swarthmore page simply start typing the page title in the Link field. 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 field.
- The dialog will automatically adjust the Protocol drop-down menu value.
- 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 for more information.
- 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 optionally provide a default Message Subject and a default 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 Copy Editor. This red flag will not be visible to the public and is intended to help remind you of its presence while editing. If you need to edit the anchor name, you can click on that flag and the Anchor dialog will reopen.
The Paste button is no longer actively supported. In order to transfer (copy/paste) content from another source, you will need to use your keyboard commands to copy (ctrl-c) and paste (ctrl-v) in order to add content into the Drupal editor.
Tip: Whenever you copy and paste content from another source into Drupal, you should always double check the content. The copy/paste function can sometimes bring over unwanted formatting. If this happens, you can use the Remove Formatting button (see below) to remove any issues.
Highlight the text in the Drupal editor that you wish to cut or copy, then select either the Cut button or the Copy button to either remove (and copy) the text or to just copy the text. Place your cursor to the desired location in the text editor and use the keyboard command paste (ctrl-v) to insert the text which you previous cut/copied.
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 tool. It looks like a left-facing curved arrow. It's 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 tool. 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 tool. 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 tool. 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.
The Accordion button inserts a series of elements that can be collapsed and expanded by a visitor. Each accordion element is comprised of two parts: Accordion title and Accordion content. The Accordion title is always displayed to the visitor, while the Accordion content is conditionally displayed depending on either the Initial state given to the accordion element or by a visitor manually toggling the accordion state.
Insert a new accordion
- Place your cursor in the location of the Copy Editor where you would like the accordion to appear.
- Click the Accordion button.
- An accordion, pre-populated with placeholder, content will appear.
- Update the placeholder content as needed.
Add a new accordion item to an existing accordion
- Right-click on the Accordion title of an accordion item that appears either above or below the intended location of your new accordion item
- Choose the menu option that best meets your need, either Add accordion item after or Add accordion item before.
- A new accordion item will appear in the Copy Editor.
Remove an accordion item from an existing accordion
- Right-click on the Accordion title of an accordion item that you intend to delete.
- Choose the Remove accordion item menu option.
Set the Initial state, or the default visibility state, of an accordion item's content
- Right-click on the Accordion title of an accordion item that needs an updated Initial state.
- Choose the Open/collapse accordion item menu option to toggle the Initial state value.
- The new Initial state value will be reflected above that accordion item.
Reposition an existing accordion in the Copy Editor
- Hover over the accordion element to display a small Move icon, represented by four arrows, located in the upper left corner.
- Click on the Move icon and hold the mouse button down to drag and drop the entire accordion into a different location in the Copy Editor.
Insert Panel Panes
Several Panel Panes, typically managed via the Arrange Panes tab, are available for use directly in the Copy Editor. The following panes are supported at this time:
This functionality is only available for existing panes. Please see the linked documentation for working with each of the items listed above as the instructions below assume that the pane has already been created.
You will also want to know the title of the pane you intend to use, prior to following the process outlined below.
Insert a new panel pane
- Place the cursor in the location of the Copy Editor where the pane should appear.
- Click the Insert Panels Pane button to reveal an options menu.
- Make a selection in the Choose a pane type field.
- Place the cursor in the Search by pane title field. This will reveal a list of all panes of that type, which are at your disposal. Choose an item from this list or begin typing the title of the pane to narrow down the options.
- An element representing the pane should appear in the copy editor.
Reposition a panel pane within the Copy Editor
- Hover over the pane element to display a small Move icon, represented by four arrows, located in the upper left corner.
- Click on the Move icon and hold the mouse button down to drag and drop the entire element into a different location in the Copy Editor.
Update the Panel Pane selection
- Double-click the panel pane element to reveal the Select Pane options dialog.
- Choose your new pane following the previous instructions for inserting a new panel pane.
The Image button will begin the process of inserting an image at the current cursor location. Please see the article on Working with Images in the Editor (non-Primary Images) for complete documentation.
Clicking the Source button will display the underlying HTML responsible for rendering the text formatting, links, images, and other elements that will appear on the page. Editors who are comfortable working with HTML may find this functionality useful for troubleshooting, however it is not necessary for the general editing of content.
Maximize or Minimize the Copy Editor Window
The Maximize button will expand the Copy Editor to take up the full browser window. This can be useful when working with a large amount of content or as a means of cutting down on distraction during the writing process.
Click the Maximize button a second time in order to minimize the Copy Editor, returning it to its original size.
The Help icon will open https://www.swarthmore.edu/web-help in a new browser window. This page features links to Drupal documentation and training resources.