1. Home
  2. Drupal Training Handbook
  3. Content Editor

Content Editor

Formatting Text

  • The B, I and S buttons are for Bold, Italics, and Strikethrough.
  • The two buttons with the X enable Superscript and Subscript.
  • The Quote button is for adding a Blockquote.
  • The Tx button removes formatting from content (such as formatted text that has has been copied/pasted from Word or other like applications).
  • The buttons with the stacked horizontal lines are for aligning content -- Left, Center, Right, and Justify.
  • The Normal drop-down menu enables you to:
    • return selected text to “normal” (i.e., match the standard text format of content on the site)
    • turn text into headers like in Word

Note: Your page title will always, by default, be your Heading 1, thus the options available begin with Heading 2. Additional headings can be added as needed and should follow a hierarchical heading structure, such as:

Section 1 Starts Here (Heading 2)

<Normal content goes here>

Section Sub Header (Heading 3)

<Normal text goes here>

Section Sub-Sub Header (Heading 4)

Section 2 Starts Here (Heading 2)

Linking

Internal and External Content

  1. To add a link, highlight the text you want linked.
  2. Click the Link icon (resembles a chain link).
    1. Note: The icon to the right (chain link with a small X) can be used to remove a link from text.
  3. Depending on what you want the link to point to, choose from the following:
    • If you want to link to a page or document on the site, start typing the title of an existing page, and then click to select it from the list that appears beneath the field.
      • Note: 
    • If you want to link to an external URL, paste or enter the page or website URL.
    • If you want to link to an email address, type: mailto:email address (e.g., mailto:wendy.wickstrom@watech.wa.gov).
  4. Click the Save button.

Adding Anchors to a Page and Linking to Them

Anchors are used to bookmark sections of a page in order to add a link either on that page or a different page that jumps directly to the bookmarked section.

  1. To add an anchor to text on a page:
    1. Select the text you want the anchor link to point to.
    2. Click the Anchor icon (looks like a flag) in the content editor.
    3. Enter an Anchor Name, and then click OK.
      • Note: Anchor names should be simple and not contain spaces.
  2. To link to an anchor:
    1. Change the Link Type field to Link to Anchor in the Text.
    2. Select an existing anchor from the By Anchor Name field.Click the Link button.
    3. In the URL text field, enter a hashtag (#) followed by the anchor name.
      • Note: If the anchor is on another page, then enter the name of the page, followed by the hashtag and anchor name.

Lists

Ordered and Unordered

The button with two dots, each with two horizontal lines, is used to create an ordered list. Example:

  • List item 1
  • List item 2

The button with the numbers 1 and 2, also with horizontal lines, is used to create an ordered list. Example:

  1. List item 1
  2. List item 2

Table of Contents

A table of contents will be dynamically created based on headers defined on the page and will auto-update as headers are added or removed. To add a table of contents, perform the following:

  1. Click the Table of Contents button (vertical rectangle).
  2. Choose the alignment for the table (Not Set, Align Left or Align Right).
  3. If you the table to exclude sub-headings, check the box for Ignore nested headers.
  4. Click the OK button.

Media and Embeds

Place your cursor where you want the desired media to be embedded. Click the Media Entity Embed button and then select the desired media from the autocompleting field. Click Next.

Then select the desired alignment and enter a caption if desired. Click Embed.

Page Elements

Data Table

Tables should primarily be used for data tables and not for positioning or formatting regular content. To add a data table, perform the following:

  1. Click the Table button.
  2. Define your Table Properties. The properties are:
    • Rows
    • Columns
    • Width - Do not use widths based on pixels; use percentages instead. (e.g. The default is 500px. It is recommended to set it to 100%, unless you encounter formatting issues, in which case try a lower percentage.)
    • Height
    • Headers - Data tables should always have headers defined. Options available are: First Row, First Column, Both
    • Caption
  3. Click the OK button.

Tools

Undo and Redo

The buttons that appear as left and right arrows are used to Undo and Redo changes made to the content since it was opened for editing.

    Accordions (Hide/Show)

    The Insert Accordion button (looks vaguely like a hamburger menu icon) enables you to easily add accordions (i.e., hide/show functionality). To add an accordion, perform the following:

    1. Click the Insert Accordion button.
    2. In the Accordion title fields, enter the text you want to be displayed as the heading for the collapsed (hidden) content.
    3. In the Accordion content fields, enter the text that will be hidden when the section is collapsed.

    Show Blocks

    This button will display how the content in the text area is organized by HTML tags, such as headers, paragraphs, accordions, etc. It does not do anything to the content and text.

    View Source

    The Source button toggles the content of the field to display as HTML.

    Expand Editor Screen

    The Maximize button (appears as four arrows facing out) allows you to expand the editor window to occupy the full height/width of your browser window.