Working with the Drupal Copy Editor

Open

A screenshot of the Copy Editor tools found in Drupal.

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 support@swarthmore.edu.

Formatting Text

Emphasis Styles

Open

Bold

Highlight text and select the Bold icon to apply a bold emphasis to text

Italics

Highlight text and select the Italics icon to apply an italic emphasis to text

Indentation

Indent or remove indentation from a paragraph

Blockquote

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.

List Styles

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.

Bulleted List

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. 

• Item

• Item

  • Nested item

• Item

Numbered Lists

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.

1. Item

2. Item

3. Item

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.

Special Characters

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

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

Creating Links

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

URL

1. Copy the URL from the page you want to link to and paste it in the URL field.

2. The dialog will automatically adjust the Protocol drop-down menu value.

3. Under Target → choose New Window

Document

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.

1. Choose Link to an Anchor in the text 

2. Under Select an Anchor → choose By Element Id.

3. 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").

Creating Anchors

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:

• creatingAnchors

• admissionsRequirements

• required-documents

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.

Paste

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.  

Cut/Copy

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.

Remove Formatting

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.

Tables

Use this button to open the table dialog box. 

Table Properties Tab

Rows and Columns

Select the initial number of rows and columns to add. This can always be modified later.

Table Type

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

Headers

Choose whether your first row, first column, or both are to be used for the table headers.

Captions

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

Advanced Tab

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.

Accordions

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

1. Hover over the accordion element to display a small Move icon, represented by four arrows, located in the upper left corner.
   
   

2. 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:

• Audio Player

• Call to Action

• Lead

• Video Only

Insert a new panel pane

1. Place the cursor in the location of the Copy Editor where the pane should appear.

2. Click the Insert Panels Pane button to reveal an options menu.
   
   

3. Make a selection in the Choose a pane type field.

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

5. An element representing the pane should appear in the copy editor.

Reposition a panel pane within the Copy Editor

1. Hover over the pane element to display a small Move icon, represented by four arrows, located in the upper left corner.
   
   

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

1. Double-click the panel pane element to reveal the Select Pane options dialog.

2. Choose your new pane following the previous instructions for inserting a new panel pane.

Insert Images

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.

View Source

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.

Help

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.