On this page:

Basic Info

The Rich Text component is perhaps one of the most important components within the CMS as it how you get pen to digital paper. It offers a variety of style and formatting options in an easy to use interface similar to most word processing software.

Example

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque et quam at eros ultrices tempor at quis eros. Phasellus molestie turpis a lectus viverra feugiat.

Tutorial

  1. Navigate to and open your page.
  2. Add the Rich Text component.
  3. A new Rich Text component without content will appear on the page as a placeholder icon.
  4. To edit the component:
    1. Right-click on the component and select Edit; or
    2. Double-click on the component.
  5. An edit window will appear so you can add content. The Rich Text component functions similarly to most text editing or word processing software, but with features specific to the CMS.
    1. Type text directly into the text box or paste plain (unformatted) text using the "paste as text" clipboard icon.
      Note: The CMS uses it's own unique coding language and therefore cannot understand all coding used to format text within all word processing programs (such as Microsoft Office, Wordpad, or even email and HTML).
    2. Format and style content as necessary.
    3. Insert links.
    4. Create anchors.
  6. Click OK.

^ Back to top

Rich Text Format and Style Options

A variety of style and formatting options are available in the Rich Text component.

Editing Toolbar Options

  • B: Bold (ctrl + b) Make the selected text bold
  • I: Italic (ctrl + i) Make the selected text italic
  • U: Underline (ctrl + u) Underline the selected text
  • Subscript: Make the selected text slightly smaller and appear below the baseline; ex: H2O
  • Superscript: Make the selected text slightly smaller and appear above the baseline; ex: 2x
  • Hyperlink: Create or modify a hyperlink
  • Anchor: Add or edit an anchor
  • Bullet List: Start a bulleted (unordered) list
  • Numbered List: Start a numbered (ordered) list
  • Indent: Indent the current paragraph or list items
  • Outdent: Outdent the current paragraph or list items

Style Options

  • Gray Text: Make the selected text gray
  • Red Text: Make the selected text red
  • Callout Text: Highlight selected text similar to a pull quote in a magazine or newspaper.
  • Strikethrough: Strikethrough the selected text

Format Options

  • Paragraph: Standard text style
  • Header 2
  • Header 3
  • Header 4
  • Header 5
  • Blockquote: Apply blockquote style to selected text, recommended for emphasizing quotes or content of four (4) lines of text or more

Remove Style or Format Options

  1. Place cursor anywhere within the text that has the style or format you would like to remove.
  2. Return the text to it's original format:
    1. For styled text (such as Callout or Grey Text) click the X in the red circle next to the Style options in the Editing Toolbar; or
    2. For formatted text (such as Headers or Blockquotes) select Paragraph from the dropdown list of Format options in the Editing Toolbar.
  3. Click OK.

^ Back to top

Insert a Hyperlink

  1. Highlight the text that will become your link text:
    1. Click and drag your cursor to highlight text; or
    2. Double-click to highlight a single word; or
    3. Triple-click to highlight an entire line of text.
  2. Click the hyperlink icon from the Rich Text editing toolbar. This icon looks like a chain link over a globe.
  3. The Hyperlink edit window will appear. In the Link field:
    1. Navigate to a CMS page or file in the DAM; or
      1. Note: When searching for digital assets, the CMS will list content based on the Title provided in the metadata and/ or its filename, if no Title is available.
    2. Copy and paste an external URL; or
    3. Add "mailto:" before an email address; or
    4. Add an anchor.
  4. Click OK to insert link.
  5. Linked text should now appear red.

Remove a Hyperlink

  1. Insert your cursor within any portion of the linked text (you do not have to highlight everything).
  2. Click the Unlink icon from the Rich Text editing toolbar. This icon looks like a chain link with a red X over a globe.

^ Back to top

Create an Anchor

An anchor creates a virtual bookmark within the text of a webpage that you can link to from elsewhere in the page or website.

Note: Anchors will only work within an Expandable when content for that particular component is no longer hidden. Do not link to an anchor within the hidden text of an Expandable from outside of that component.

  1. Place your cursor where you would like to insert an anchor.
  2. Click the Anchor icon from the Rich Text editing toolbar. This icon looks like a physical anchor.
  3. The Anchor edit window will appear. In the Name field provide a name for your anchor that:
    1. Is all lowercase,
    2. Has no spaces,
    3. Has no special characters, and
    4. Is easy to remember.
  4. A small anchor icon will appear within your text, however this is only visible to you and cannot be seen on the live site.
  5. Follow the steps to insert a hyperlink and in the link field insert your anchor with a hashtag followed by your previously created anchor name. For example: #anchorname

Remove an Anchor

  1. Click once on the anchor icon within your text.
  2. In the Anchor edit window, remove the anchor name text.
  3. Click OK.

^ Back to top

Accessibility Info

Headings

  • Your page title is considered an H1 heading, so your first heading should be an H2.
  • When nesting headings, remember not to skip levels when creating sub-sections. For example, you can go from an H2 to an H3 but not an H2 to an H4.
  • Don't use the heading format solely for aesthetic purposes. If you want to call out an important point, consider making that sentence bold or applying the callout text style instead of incorrectly applying a heading format.

Linked Text

  • Screen readers are unable to provide context to a link beyond the linked text — which means multiple "click here" links on a page all appear to be the same.
  • When linking a file, provide the file type and size as part of the linked text. For example, NYU Identity Style Guide (PDF: 367 KB).

Learn more about text and accessibility at NYU.

^ Back to top

Screenshots

Component Tutorial: Rich Text edit window

^ Back to top