The Drupal content editor is a rich text editor that allows users to create content for the body of their website with little or no HTML knowledge required. Non-technical users can easily build and maintain a website without relying on Marketing Communications staff.
Many of the elements are similar to using Microsoft Word, so in this tutorial we will cover the more uncommon tools. Below is a quick overview describing all of the buttons located in the DCE menu. Click on a menu item below to see how to use it:
Bold, Italics, and Strikethrough
Click these buttons to set bold, italics, and strikethrough as you would in a Word document.
Align Text
Click this button to open a list of text alignment options. The editor defaults to left align, however you can also use the center align, right align, and justify options if needed.
Indents
Click the right button to increase the indent. When used with a bullet list, this will move the line of bullets to the right, nesting them. If the indent is too great, click the left button to decrease it.
Bulleted and Numbered Lists
Click these buttons to create bulleted and numbered lists. Click the arrow next to the numbered list icon to set the starting number or reverse the numerical order.
Links
Use this button to add a link to a webpage, email, or page anchor.
Highlight the text you would like to link on and click the link button.
Paste or type the URL you would like to link to in the text box, and click the Save button, which features a green check mark.
To edit or remove an existing link, click on the link text and a menu will pop up below the link.
Click on the pencil to edit the link, or click the unlink icon to remove the link.
See the Links Page for more information about creating links.
Anchor/Jump Links
This button allows you to place an anchor link within your content. An anchor link is an internal link that goes to a chosen location within a page on your site. For example, this page uses anchor links at the top of the page so that each Drupal menu icon links to the relevant section below.
To create an anchor:
- Place your cursor in front of the section you would like to link to. This is often just before a section heading.
- Click the icon that says "# ID". (When you hover over this button, you will see that it is labeled "set element id attribute.")
- Type your chosen element ID in the pop-up box. Use simple, meaningful text. Lowercase is recommended. Use hyphens and underscores rather than spaces. Each anchor must be unique on the given page. Example ID: application-instructions
- Click the green check mark to apply the anchor.
Note: There is currently no visual indicator that anchors exist when working in the editor. You can edit anchors by working in the Source view or by placing your cursor where you know an anchor exists and clicking the # ID button.
You can link to this anchor by appending # followed by your anchor ID to the page URL. For example, if you wanted to link to this section from an outside source like an email, you would link to: https://digital.uoregon.edu/drupal/content-editor#anchor-link. If you are linking to an anchor from within your site, use relative links that don't include your site domain, like this: /drupal/content-editor#anchor-link
After you save the page, it's a good idea to test the anchor to make sure it is working as you intended.
Insert Media
This button allows you to upload an image to the media library, or browse existing media library images, and place the image on the page. Visit our Images page to learn more about using images on your website.
Superscript and Subscript
These are the superscript and subscript buttons. The superscript icon is the one on the left that looks like X squared. This is a superscript example: High Text and this is a subscript example: Low text
Block Quote
Insert a block quote using the block quote button. A block quote offsets the text from other paragraphs and can be a good way to draw attention to or highlight a section of your content.
Horizontal Line
This is the horizontal line button. When placed between paragraphs, the horizontal line will run the width of your content.
Note: Images or text that are aligned or floated to the left or right can cause the line to not run the whole width of the content, so it is something to be aware of when you use horizontal lines.
Special Characters
Use this button to add special characters (—, ©, ™, ¢, £, ≈, etc.). When you click on this button it will open a pop-up window with more than 100 different letters and characters you can insert into your content.
To insert a character, put your cursor where you want the new character, click on the character you want and it will automatically be added to your content.
Paragraph/Heading
Use this drop-down menu to select heading styles for section headers. Paragraphs should use the default Paragraph style. See the header instructions for more information.
Undo and Redo
These buttons allow you to undo a change or redo a change that you have made to your content.
NOTE: These buttons do not work while editing in the Source view.
Remove Formatting
Use this button to remove formatting. When you paste the content into the body content area and it doesn't look like it should, you can use the remove formatting button to try to fix it.
NOTE: Sometimes text will need to be retyped or copied again in order to fix visual issues depending on the cause of the problem.
Source Code
Click this button to view or edit the HTML source code.
Note: At this time it is not possible to undo edits made in the Source view using the undo button or keyboard shortcuts. You can click the Source button to return to the normal editing view and then click undo, however, you will erase all changes you just made while in Source view.
Templates
Use this UO Edit Suite Templates button to select and add a template to your content. See the template instructions for more information.
Insert UO Calendar
Use this button to insert a calendar on your page. Visit our Dynamic Content page to learn how to insert a UO calendar.
Embed iFrame (Use to add videos)
Use this button to add YouTube or Vimeo videos as iFrames. See the video instructions for more information.
Insert View
Use this button to insert a dynamic news feed on your page. You can set up automatic feeds using tags on article pages. Visit our Dynamic Content page for more information on Article and External Article News Feeds.