Use the Content Editor

If you run into a problem, have questions about how something works, or have questions about functionality that is not covered, email webservices@uoregon.edu to ask for assistance.

If you would like to set up a training for someone in your department who needs to learn our Drupal system or needs help beyond the basic instructions, please complete the request form and select training.

Ask for Assistance   Request Drupal Training


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:

Content editor menu buttons, Bold, Italic, Strikethrough Content editor menu buttons, Text align Content editor menu buttons, Bullet options Content editor menu buttons, Text indents Content editor menu buttons, Undo, Redo Content editor menu buttons, Link editor Content editor menu buttons, Anchor flag Content editor menu buttons, Image editor Content editor menu buttons, Superscript, subscript Content editor menu buttons, Blockquotes Content editor menu buttons, Linebreaks Content editor menu buttons, Copy and paste options Content editor menu buttons, Show blocks Content editor menu buttons, Remove formatting Content editor menu buttons, Special characters Content editor menu buttons, Styles for paragraph text Content editor menu buttons, Tables CKEditor menu bar, iframe button CKEditor menu bar, source code button Content editor menu buttons, Add links Content editor menu buttons, Add images Content editor menu buttons, Templates CKEditor menu bar, dynamic content button CKEditor menu bar, map button


Bold, Italics, and Strikethrough

These buttons works just like the options in a Word processing document. B for bold, I for Italics, and S for Strikethrough.

Content editor menu buttons, Bold, Italic, Strikethrough


Align Text

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.

Content editor menu buttons, Text align


Bulleted and Numbered Lists

These are bullet buttons. They work just like Word bullets and numbered lists. You can use the indent buttons to change the bullet positions.

Content editor menu buttons, Bullet options


Indents

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.

Content editor menu buttons, Text indents


Undo and Redo

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.

Content editor menu buttons, Undo, Redo


Link Editor (Rarely Used - use link with the plus sign icon instead)

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.

Content editor menu buttons, Link editor


Create Anchor / Jump Links

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.

Content editor menu buttons, Anchor flag


Add Image (Rarely Used - Use double image icon instead)

This button allows you to edit the images you have added with the image button on the far right of the menu. See the section on editing image for more information.

Content editor menu buttons, Image editor


Superscript and Subscript

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

Content editor menu buttons, Superscript, subscript


Block Quote

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.

Content editor menu buttons, Blockquotes


Horizontal Line

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.

Content editor menu buttons, Linebreaks

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.


Cut and Copy

These are the cut and copy buttons. They look and function just like a Word processing document.

Content editor menu buttons, Copy and paste options


Blocks

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.

Content editor menu buttons, Show blocks


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

Content editor menu buttons, Remove formatting


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.

Content editor menu buttons, Special characters


Format

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.

Content editor menu buttons, Styles for paragraph text


Tables (DO NOT USE - Use responsive tables from the templates menu)

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.

Content editor menu buttons, Tables

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.


Maximize / Minimize Content Editor

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.

Content editor menu buttons, Maximize


iFrame (Use to add videos)

Use this button to add YouTube or Vimeo videos as iFrames. See the video instructions for more information.

CKEditor menu bar, iframe button


Templates

Use this button to select and add a template to your content. See the templates instructions for more information.

Content editor menu buttons, Templates


Link to Content

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.

Content editor menu buttons, Add links


Source Code

Use this button to display the HTML source code.

CKEditor menu bar, source code button


Media Browser

Use this button to add images while working on the page. See the images instructions for more information.

Content editor menu buttons, Add images


Insert Dynamic Content

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.

CKEditor menu bar, dynamic content button


Insert UO Map

Use this button to add a UO map to your website. See the UO maps instructions for more information.

CKEditor menu bar, map button


HTML Source Code

At the bottom of the Drupal Content Editor are also two options:

Disable rich-text options

The Disable rich-text option changes the editor display to HTML source code view.
For the Text format options, choosing anything other than the Full HTML option will also cause the editor to change to HTML source code view.