AGNR Groups

Web Groups for the College of Agriculture &
Natural Resources and Affiliates

Using the Text Editor

Printable Cheat Sheet: The Drupal Text Editor

The Body field is a large text area that holds the main content of Pages, News Stories, Articles, and other content types. The body field features a WYSIWYG (What you see is what you get) text editor similar to a word processor. Using this text editor, you can add text, format it with paragraphs, headings, and styles, and add images and links.

Other content types use the text editor on other fields, but it works the same way.

Using the Text Editor

Summary

The first thing you'll see when you go to edit the Body field (or almost any field that uses the text editor) is a link to "Edit Summary." Click on that link to open up a new text field where you can enter a text-only description of the content.

Normally, when you view a listing of News Stories or other pieces of content with teaser text, Drupal automatically shows the first 300 characters or so of the Body field. However, if you create a summary, it will be used instead. This allows you more control over what people see when previewing the content.

Text Editor Buttons

Across the top of the text editor, you will see a row of buttons. These help you to add elements and format your text.

Bold  
Italic  
Bulleted List  
Numbered List  
Outdent and Indent Within a bulleted or numbered list, these buttons can be used to create sub-items. Do not use this button to create indented paragraphs. It will look indented when you edit it, but the indent will not show up on the published page.
Undo and Redo  
Unlink Click a link, then click this button to remove the link. If you select a portion of a link, only the selected portion will be unlinked. This button is separated from the link button, which is usually found on the second row of buttons.
Anchor Use this button to create a named anchor in the page. This enables you to create a link to a specific point on a long page. The tutorial on creating anchor links provides the basic information on how anchor links work.
Image Insert an image or modify the properties of an image you have already selected.
Block Formats Choosing an option from this list formats an entire block of text. By default, Drupal puts everything you type into a paragraph. Every time you hit enter, it creates a new paragraph. Click anywhere within a paragraph and select Heading 2 to convert the paragraph to a heading (usually larger and in a serif font). Paragraphs have built-in bottom margins, but divs have no margins. The options in this menu correspond to HTML tags, and some basic understanding of HTML can help you understand how these block formats work.
Styles (Classes)

For additional control over your formatting, you can select from a number of styles.

  • Align left and align right change the alignment of images and justification of paragraphs. (Apply to an entire block level element, such as p, or an image)
  • Borderless table Removes borders from table cells when applied to a whole table. Select the whole table using the path bar.
  • Section start puts content on a new line, useful for starting a new section after a wrapped image. (Must be applied to a block level element, such as p or div)
  • Section divider gives the selected content a top border. (Must be applied to a block level element, such as p or div)
  • Important increases the size of text to add emphasis.
These styles correspond to classes in HTML.
HTML This button opens a new window where you can edit the HTML of your page. This is essential when you have to insert copy-paste code from another website. If your page is behaving oddly or doesn't look as expected, sometimes this can be fixed by manually updating the HTML. For help with learning HTML, see HTML Basics.
Remove formatting (Eraser) If text has formatting applied (like italic, bold), you can remove it with the eraser. Simply select the text you want to remove formatting from and click the eraser. Depending on the circumstances and how complex the formatting is, the eraser may or may not work as expected.
Paste as Text When you copy and paste text from Word (and especially from another website), you often end up with weird formatting you didn't want. If this is happening to you, try clicking the Paste as Text button before pasting. It will strip out everything but the text.
Table Buttons
Table Insert a table with this button. Once you have a table created, you can click the button any time to edit its properties (like width and height). You can also set the class (same as the Styles dropdown). Useful classes to add to tables include "Borderless table" (which removes cell borders), "Align left," and "align right," which move the table to the respective left and right of the surrounding text.
Row properties Adds properties to the currently selected row. The most useful option here is to make the top row into a header, which applies special styling to distinguish it from the rows below.
Cell properties Adds properties to the currently selected cell. Here you can change the alignment, and turn the cell into a header. This is especially useful when your left column is a header column.
Insert above  Adds a row above the current row.
Insert below  Adds a row below the current row.
Remove row  Deletes the current row.
Insert left  Adds a column to the left of the current cell.
Insert right  Adds a column to the right of the current cell.
Remove column  Deletes the currently selected column.
Split cells Opens a dialog to split the currently selected cell into several. This only works if the cell was previously merged.
Merge cells  Select multiple cells, then click this button to merge them into one.
Link (Linkit)

Create a link. Select text (or an image) then click this button to open the link dialog. To create a link, you have 3 options:

  1. Search the server for a page already on Drupal
  2. Browse for a file already on the server
  3. Type or paste in a URL

For more images on creating links using the Linkit button, see "Making a Link" on the Cheat Sheets page.

 

Path Bar

The Path Bar is an easily overlooked aspect of the text editor that can be extremely useful. It basically shows where you (your cursor, or the current selection) is located within the HTML of the page.

The path bar is shown at the bottom of the text editor window and shows a string of HTML tags.

In the example above, an image is selected, and the path bar below it shows ul » li » a » img. These are the HTML tags for "Unordered (bulleted) list", "List item," "Anchor (or link)," "Image," meaning that the selected element is an image inside of a link, inside a list item (or single bullet point), inside of a bulleted list.

The path bar comes in handy when you need to select a specific item to apply a class to (using the "Styles" dropdown).

  • For example, when you want to right-align a paragraph, you must first select the whole paragraph. To do this, simply click within the paragraph, then click the "p" in the path bar. The paragraph will be selected. Then choose "Align right" from the Styles dropdown.
  • As another example, to add a border to the top of a heading (and thus make a new section in your text), you can apply the "Section Divider" style. But this only looks right if you add the class to the heading tag. In this case, click within the heading, select the "h2" (or whatever the appropriate number) in the path bar, then select "Section Divider" from the Styles dropdown.
  • Other styles work similarly, where if they are applied to a section of text, they look different than when they are applied to an entire HTML element.

Text Format

The last (and least important) aspect of the text editor is the text format selector, found at the very bottom. You will have to click the "Text Formats Options" link to expand these options.

The Text format selector consists of a dropdown list, containing "Formatted Text," "Plain Text," and "Filtered HTML." Below that is some explanatory text about the selected format, and to the right is a link, "More information about text formats." If you click the link, you will be taken to another page and lose any work you have done on this page! Click with care!

There are almost no circumstances under which you would need to change the text format.

  • "Formatted Text" is the default, and that is the easiest to work with.
  • "Plain text" strips out any formatting in text you have already entered. If the text was previously formatted in the text editor, it will be converted to raw HTML tags and displayed just as you see it. If you are copying and pasting text from another site, you may wish to use the Plain Text format to keep out unwanted HTML. However, it is easier to use the "Paste as Text" button in the editor.
  • "Filtered HTML" shows your page in HTML code. When published, it will be converted to a human-readable format (i.e. <img> tags will be shown as images). You can also use the HTML button in the editor to see your HTML.