Text Editor

Overview

The text editor has many tools to format and style your content (see list below). Most of the tools are similar to using Microsoft Word, so in this tutorial we will cover the more uncommon tools and where to find them. 

How To

Create a Text Component

1. Navigate to the page you’d like to update, and enter the Edit Mode for the page
2. Choose the Section you would like to add the block, click the plus (+) icon.
3. Select the Text component from the component list

All Text Editor Tools

• Paragraph Editor: heading styles
• Text styles: intro text
• Bold, italic, strikethrough
• Superscript, Subscript
• Special Characters
• Hyperlink or unlink text
• Text Alignment: left, center, right
• Add Indent, Remove Indent
• Insert/remove bulleted or numbered list
• Block Quote
• Tooltips
• Insert Table
• Undo, Redo
• Clear Formatting
• Source: Work with the HTML

Paragraph: Heading Styles

This is where you can select the heading and paragraph styling for the text. When building pages, ensure you are using proper HTML Semantic structure for the page. 

Proper HTML semantic structure follows a hieracrchy of headings. The headings should properly cascade from H1, H2, H3, etc. 

• H1: Page Title at top of page (added in the hero component)
  • H2: Section Title (Second-level heading)
    • H3: Third-level heading
    • H3: Third-level heading
      • H4: Fourth-level heading
  • H2: Section Title (Second-level heading)
  • H2: Section Title (Second-level heading)

User Experience Best Practices - Headings

• Not every page needs every heading level. Follow proper heading hierarchy, but only include the levels that make sense for the content.
• Headings serve multiple purposes. They create visual hierarchy, improve SEO, and support screen reader navigation. Using the correct heading structure is essential for accessibility and usability.

Text Styles: Intro Text

This just makes the paragraph text a little larger to an emphasis to basic paragraph text. 

Text Formatting

• Bold: To bold your part of your content, just highlight the text and click on the B icon.
• Italic: To italicize text, just highlight the text and click the I icon.
• Strikethrough: To strikethrough text, just highlight the text and click the strikethrough icon.
• Sub and Superscript: sets the character slightly below or above the normal line of type. Subscripts are at or below the baseline while superscripts are above.
• Special Characters: To insert any special characters to a text box, click the Omega icon to select the character.
• Hyperlink or unlink text: To add/remove a hyperlink to text, click the link icon.
  • Linking Best Practices
    • Use clear, specific text for good user experience and web accessibility.
    • Always select pages from the URL field when possible. Only paste full URLs for external sites.
    • Select Target: “New window (_blank)” for external links only.
    • For web accessibility, enter clear, specific text in the ARIA Label field only if your link text is generic (for example, “Learn More.”)
• Text Alignment: left, center, right: To align content left, right, and center
• Add Indent, Remove Indent: To indent text, use the add/remove indent buttons.
• Bulleted and numbered lists: To create a bulleted or numbered list, just highlight the text and click on either the bulleted or numbered list buttons. 

Insert Block Quote

Block Quotes add emphasis and interest to text. They are a great way to call out a tip or a quote in a profile.

1. Highlight the text that you want to block quote.
2. Click the Block Quote icon (quote marks icon) in the editor.

Insert Tool Tip

Tool tips are a great way to add on page definitions. 

1. Highlight the text that you want to block quote.
2. Click the Tool tip icon (text bubble icon) in the editor.
3. Add the title: this should the highlighted text from the text editor
4. Add content: this is the description of the title. 

User Experience Best Practices

• Use only to provide contextual help. Use tooltips to clarify unfamiliar terms, icons, or actions, not to display essential information.

Add a Table

1. Click the Table icon to set initial table properties.
2. Set the number of rows and columns.
3. Click on the table to bring up formatting options, such as adding and removing rows and columns.
   1. To make a header column, choose Column and toggle Header Column on.
   2. To make a header row, choose Row and toggle Header Row on.
   3. Merge and Split cell option.
   4. Caption on/off.
      1. Captions aren’t required in the text editor, but they are important for accessibility. Always include a caption that explains what the table contains so users understand its purpose.

User Experience Best Practices

• Provide context before the table. Add a short introduction explaining what the user will find in the table.
• Use the caption element to describe the table’s purpose. Write captions that are short, clear, and meaningful so users immediately understand what the table represents.
• Use clear, descriptive column and row headers, and associate them with their data cells. Each data cell should be linked to a corresponding header. This ensures screen readers announce the correct header and helps all users quickly understand the table at a glance.