If you run into a problem, have questions about how something works, or have questions about functionality that is not covered, email firstname.lastname@example.org to ask for assistance.
The Drupal content editor is a rich text editor that allows users to create content for the body of your 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:
These buttons works just like the options in a Word processing document. B for bold, I for Italics, and
S for Strikethrough.
These are text align buttons. The editor defaults to a left align, however you can also use the center align or right align options if needed.
These are bullet buttons. They work just like Word bullets and numbered lists. You can use the indent buttons to change the bullet positions.
These are indent buttons. By default you can only add additional indent with the right button. If the indent is too great, you can use the left button to decrease it. Using the indent buttons with bullets will move that line of bullets to the right, nesting them.
These are the undo and redo buttons. These allow you to undo a change or redo a change that you have made to your content.
These are the link editor buttons. With the left button you can edit existing links, add email links, or a link to a page anchor. With the right button you can remove an existing link. See the section on links for more information.
This button allows you to create an anchor within your content. An anchor is a place where you can create an internal link that goes directly to a place on your page. This guide uses anchors throughout it to help you find the information you need.
These are the superscript and subscript buttons. The superscript icon is the one on the left that looks like X squared. A superscript example: High Text and a subscript example: Low text
This icon is for 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.
This is the horizontal line button. A horizontal line is a line that, when placed between paragraphs, will create a horizontal line that runs 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.
These are the cut and copy buttons. They look and function just like a Word processing document.
This is the show blocks button. It is unlikely that you will need to use this button, but it can be useful for seeing why a section of text may look different from what you expected as it will allow you to see what HTML code is influencing your content.
Use this button to remove formatting. When you paste the content into the body content area and it doesn't look like it should, or looks bad, you can use the remove formatting button to try to fix it.
NOTE: This is not a magic fix button. Sometimes text will need to be retyped or copied again in order to fix visual issues, it depends on what is causing the visual problem.
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.
Use this dropdown menu to select headers. Most paragraphs in your content will only use the normal or header styles. See the header instructions for more information.
DO NOT USE THIS BUTTON. To add tables to your content, use the responsive tables in the component templates. See the responsive tables instructions for more information.
NOTE: A responsive table is a table that breaks down to one column while retaining its row/column structure on mobile devices. If you do not need to maintain the row/column structure, then you should probably use a grid. See the grid instructions for more information.
Use this button to maximize or minimize the content editor box so that the content editor box takes up your entire browser window. Click on it again to minimize your view back to normal. This can be very useful when making lots of additions or edits to your content.
Use this button to add YouTube or Vimeo videos as iFrames. See the video instructions for more information.
Use this button to select and add a template to your content. See the templates instructions for more information.
Use this button to add links to webpages or documents or files. This button will bring up a Linkit window where you can add links to your content. See the links instructions or the file instructions for more information.
Use this button to display the HTML source code.
Use this button to add images while working on the page. See the images instructions for more information.
Use this button to add dynamic content (news feeds, etc.). Our web developers will create the dynamic content feed and then you can use this button to add it to your page.
Use this button to add a UO map to your website. See the UO maps instructions for more information.
At the bottom of the Drupal Content Editor are also two options: