The Editor
This section introduces the Drupal content editor, where you'll create and format the main content of your webpages. Each tool in the editor toolbar is explained in the sections that follow, along with recommended best practices for creating accessible, well-formatted content.
2. Working with the Editor
The body field contains the main content that appears on a webpage. The editor toolbar appears above the body field and includes tools for formatting text, adding headings, creating links, inserting tables, adding images, and editing HTML source.
The editor functions are shown below.
From left to right, the editor toolbar includes:
- Undo / Redo
- Remove Formatting
- Bold, Italics, Bullet List, Ordered List
- Headings
- Styles
- Horizontal Rule
- Anchors
- Links
- Special Characters
- Find / Replace
- Tables
- Add Image in Body Copy
- Upload Image
- View HTML Source
- Toggle Full Screen
2.1) Undo | Redo
Allows you to undo or redo any edit you make to the body copy block.
2.2 Remove Formatting
When you copy and paste content from another source (Google Docs, Microsoft Word, PDFs, or a website) the original formatting (fonts, colors, font sizes, spacing, and other styles) is often copied along with the text. This formatting may not match the design of the Swarthmore website.
The Remove Formatting tool strips away the imported formatting while preserving the text itself. To use it, highlight the text you want to clean up and click the Remove Formatting button in the editor toolbar.
Always use Remove Formatting after pasting content into Drupal. This helps ensure your content uses the site's standard styles and remains consistent with the rest of the website.
2.3 Bold, Italics, Bullet Lists, and Numbered Lists
The editor toolbar includes tools for applying bold and italic formatting, as well as creating bulleted and numbered lists.
Choosing the Right Type of List
Drupal supports two types of lists, each intended for a different purpose.
Numbered lists should be used when the order of the items matters, such as instructions or procedures.
Example:
- Heat the oven to 250°F.
- Season the steak.
- Cook in the oven until nearly done.
- Sear each side over high heat.
- Let the steak rest.
- Serve.
Bulleted lists should be used when the order of the items is not important, such as checklists or collections of related items.
Example:
- Charging cables
- Socks
- Shirts
- Toiletries
- Prescription medications
- Extra pair of glasses
Choose the list type based on its purpose. Use numbered lists for step-by-step instructions and bulleted lists for unordered collections of related items.
2.4 Headings
Headings organize your content into logical sections, making webpages easier to read and navigate. Drupal supports heading levels from H2 through H6 within the page editor.
The page title is automatically created as the page's H1 heading. When adding headings within the body content, always begin with an H2, then use H3, H4, and so on as needed.
Heading levels should always follow a logical hierarchy. Skipping heading levels (for example, jumping from H2 directly to H4) can make content more difficult to understand, particularly for visitors using screen readers.
A typical heading hierarchy looks like this:
H1 Page Title (added automatically)
H2 First Main Topic
H3 First Subtopic
H3 Second Subtopic
H3 Third Subtopic
H2 Second Main Topic
H3 First Subtopic
H4 Supporting Detail
H4 Supporting Detail
H3 Second Subtopic
H2 Third Main Topic
2.5) Styles
The styles drop down menu allows you apply custom font styles to your content. This is useful if you wish to include lead paragraphs (slightly larger font size for the intro paragraph) or pull quotes (a quote pulled from the content) to your body content.
2.6) Horizontal Rule
Allows you to add a horizontal rule to your content.
2.7 Anchors
Anchors are internal links that allow visitors to jump directly to a specific section of a webpage. They are commonly placed on headings so readers can quickly navigate long pages.
Anchor names should be unique, contain no spaces, and use a simple naming convention. Examples include:
CreatingAnchorsadmissionsRequirementsrequired-documents
When an anchor has been created successfully, a small red flag icon appears in the editor. This icon is only visible while editing and is never shown to website visitors. Selecting the flag displays the anchor's name and allows you to edit it if necessary.
2.7.1 Creating an Anchor
After creating an anchor, click the red flag icon to open the Anchor dialog.
2.7.2 Linking to an Anchor on the Same Page
To create a link to an anchor on the page you're currently editing:
- Highlight the text that should become the link.
- Select Edit Link.
- In the Link URL field, enter the anchor name preceded by a
#character.
For example, if the anchor name is Definitions, enter:
#Definitions
2.7.3 Linking to an Anchor on Another Page
You can also link directly to an anchor on another page by appending the anchor name to the end of the page's URL.
Examples:
https://www.swarthmore.edu/my-example-page#Definitions
or
/node/100057#Definitions
2.8) Links
Adding links to other webpages or other content is one of the most common tasks you’ll be doing when creating webpages. The most important think to remember about a link is the text of that link. Make sure it is meaningful and lets a visitor know a little about what will happen when they visit that link. Visit Unlock the Power of Meaningful Links to learn more. Here are some examples of informative and uninformative link text:
| Ineffective | Effective |
|---|---|
| WCAG-compliant links should explain their purpose for the link text alone. Click here to learn more. | WCAG-compliant links should explain their purpose from the link text alone. |
| Check your contrast levels using https://webaim.org/resources/ contrastchecker/ |
Check your contrast levels using WebAim’s Contrast Checker |
| Swarthmore’s Accessibility website includes five tips for preparing accessible materials | Swarthmore’s Accessibility website includes five tips for preparing accessible materials |
| Here is an introduction from WebAIM to links and hypertext | WebAIM’s introduction to links and hypertext |
| 10 minute conversation | How to have a 10 minute conversation [PDF] |
2.8.1) Linking to another webpage in Drupal
- Highlight the text you wish to become a link
- Click the the chain icon in the menu bar. This will open the link editor window
2.8.2 How the Link Editor Works
- Link URL - is where you would add the link or URL.
- Link to a Document - if linking to a document (hosted in Drupal) then you click this button.
- Advanced - opens/collapses the advanced tab which includes: CSS Classes, ID, and Open in a new window.
- Open in a new window - allows you to toggle whether the link should open in a new tab or not. The default setting is have the link open the same window/tab.
- Save / Cancel - click the check mark to save your edits or the x to cancel
2.8.3 Creating a link to another page in Drupal
- Start typing the name of the webpage you wish to link to. For example, if you wanted to link to the “Admissions & Aid” homepage, you would type “Admissions” and every page in Drupal that has the word “Admissions” in it’s title would appear in the list below.
- Select the webpage you wish to link to.
- After selecting the page you wish to click to, the link editor will switch back the minimized view. In place of the page name, you will see a reference like this /node/######. This is normal. This is how Drupal keeps track of internal links.
- Click the checkmark to save your changes or the X to cancel.
2.8.4 Creating a link using an URL
- Link URL - You can also simply copy and paste any URL into the field. This includes both external links, internal links, Google drive links, etc.
2.8.5 Linking to a document
- You add a link to a document. Select the text you wish to become a link. Always include the file type to let people know that the link points to a file and not a website. For example, add [pdf] for a pdf file.
- Click the Link to Document Button to add a new document (or select) a existing document that has been previously uploaded to Drupal
- It is recommended always have PDFS (or other documents) open in a new tab. You can control whether a link opens in a new tab, by clicking the Advanced tab
- Under the Advanced tab, slide the toggle to green to have the link open in a new window.
How the “Link to Document” works
Clicking the Link to Document Button will open a new window that allows you upload a new document to Drupal or select an existing document.
- Select Document - will display all the documents that has been previously uploaded into Drupal
- Upload Document - will allow you upload a new document
- Filename - lets you search the documents folder
- Name - allows you sort the folder by filename
- Created - allows you sort the folder by when it was uploaded.
- Radio Button- choose the the file you wish make become a link.
- Select Document - save your choice. You will then be returned to the previous window.
Once the document is selected:
- The name of the file you selected will appear in the Link URL field
- Click the green check mark to add the link in Drupal.
2.8.6 Edit or remove a link
- To edit or remove a link, click the link. The link editor window will appear.
- You can select the pencil icon to edit an existing link
- Or the paperclip X icon to remove the link.
2.9) Special Characters
This function allows you to add special characters (a,e,i,o,u with accents and other marks). This is most common for foreign words and names that might appear on the site
2.10) Find & Replace
Allows you to do a standard find and replace in the body content block.
2.11) Tables
Use this function to add table content to your webpage. Ideally, tables are created to share data e.g. dates and times of a train schedule. Avoid using tables to control look and feel.
- You first select the number of rows and columns using the matrix. Remember to include a column or row for table headings (see WebAims article on tables to learn more.)
- Add your column or row headings.
- Then you add your data.
2.12) Add Image
Visit 6.2) Adding an Image in the Body Copy to learn more about adding an image to the body copy
2.13) Upload Image
Allows you upload images directly to Drupal.
2.14) HTML Source
Clicking the HTML Source button will display the underlying HTML responsible for rendering the text formatting, links, images, and other elements that 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.
2.15) Full Screen
The Full Screen button will maximize 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 button a second time in order to minimize the Copy Editor, returning it to its original size.