Rich Text

On this page:

Basic Info | Example | Tutorial | Rich Text Format and Style Options | Insert a Hyperlink | Create an Anchor | Accessibility Info | Screenshots

Basic Info

Use the Rich Text Editor to add copy (words, numbers and commom keyboard symbols) to your page. It is one of the most fundamental components for content creation. The component offers a variety of pre-defined styling and formatting options, as well as functions such as copying, pasting and hyperlinking text.

Example

Many Rich Text Editor styles are employed on this page, feel free to look around!

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.

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 Editor component  placeholder icon will appear in the space.
   
4. To edit the component, click or touch once on the placeholder. The component toolbar will display on top of the space.
   
5. Select the wrench icon to configure.
   
6. Click or touch the text editing box within the dialog window to display the editing menu.
   
7. 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 applies it's own unique coding to text. The CMS' code which will overwrite formatting code from other sites and word processing programs (such as Microsoft Office, Wordpad, or even email and HTML).
      When you "paste as text," outside formatting is removed so that the CMS styling can be applied.
      
   2. Format and style content.
   3. Insert links.
   4. Create anchors.
      
8. Click or touch the checkmark to save and close.
   

^ Back to top

Rich Text Format and Style Options

Editing Menu 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
• Alignment: Center text, or left/right justify.
  
• List: Create a bulleted (unordered) or numbered (ordered) list, indent or outdent
  
• Subscript: Make the selected text slightly smaller and appear below the baseline; ex: H₂O
• Superscript: Make the selected text slightly smaller and appear above the baseline; ex: 2^x
• Hyperlink: Create or modify a hyperlink
• Unlink: Remove a previously created hyperlink
  
• Anchor: Add or edit an anchor
• Search: Search and find a word or phrase within your text
  
• Spellcheck:  Turn spellchecker on and off
• Symbols: Insert common symbols into text
  

^ Back to top

Style Options

To access this menu, select the dropdown next to the "S" icon in the Rich Text menu.

Important: You will not be able to see the styles you've applied until you've saved and closed the editing dialog.  

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. Highlight the text with the style or format you would like to remove.
   
   1. For styled text (such as Callout or Grey Text), click or touch the "S" icon's dropdown from the editing menu and un-select the styles that are applied.
      
   2. For formatted text (such as Headers or Blockquotes) select the Paragraph icon from the editing menu and un-select the formatting that was applied.
      
2. Click the checkmark to save and close.  

^ Back to top

Insert a Hyperlink

1. Highlight the text that you want to link.
   
2. Select the hyperlink icon from the editing menu. This icon looks like two chained links.
   
3. The Hyperlink edit window will appear. In the Path 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 the blue check mark to save and close the hyperlink editing window.
   
5. Linked text should now appear blue and underlined.
   

Remove a Hyperlink

1. Highlight the linked text.
   
2. Click the Unlink icon from the Rich Text editing toolbar. This icon looks like a broken chain link.  

^ Back to top

Create an Anchor Link

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

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

Note for Accessibility: CMS pages already have the top of the page as an anchor point (#top). To avoid accessibility issues do not manually add an anchor with the name "top."

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 an anchor.
3. The Anchor edit window will appear. In the text field, give the anchor a name. Anchor names must:
   
   1. be all lowercase
   2. Have no spaces
   3. Have no special characters, and
      
   4. Is easy to remember and intiuitive
      
4. A small anchor icon will appear before the text you've set as the anchor.  This is only visible to you and won't be shown on the published page.
5. Follow the steps to insert a hyperlink. In the link field, insert the name you gave the anchor preceded by a hashtag. For example: #anchorname

Remove an Anchor

1. Highlight the text you set as the anchor.
   
2. Select the anchor icon from the anchor edit window. 
3. Select the garbage can icon (in red). The anchor will be removed.
   
4. Click the checkmark to save and close.  

^ 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

^ Back to top