Basic Text Formatting

Choose any of the options for your text below by clicking on the icon/performing the keyboard shortcut indicated. To format text you’ve previously typed, highlight the text and then click on the button in the editor. Many formatting options also have keyboard shortcuts.

CKEditor 5 Toolbar

The CKEditor 5 toolbar.

Demo Basic Text Formatting on CKEditor 5. or read more detail about these features.

  1. Bold
  2. Italics
  3. Underline
  4. Strikethrough
  5. Text alignment - Choose from Align left, Align center, Align right, or Justify.
  6. Font color - Use sparingly to avoid reduced text accessibility.
  7. Font background color - Use sparingly to avoid reduced text accessibility.
  8. Decrease indent - Only available when editing a list or block.
  9. Increase indent - Only available when editing a list or block.
  10. Heading - Set paragraphs or heading levels—headings in your content should be ordered sequentially for the best accessibility.
  11. Link - See Adding links.
  12. Bulleted list
    • Lists
    • like
    • this.
  13. Numbered list
    1. Lists
    2. like
    3. this.
  14. Block quote
  15. Insert media - See Adding media.
  16. Show more items - This will appear at the end of the first row of buttons and allow you to view the rest of the editor buttons.
  17. Remove format - Clears all formatting. Useful when pasting content from Word or other applications.
  18. Insert table - A feature-rich table editor.
  19. Source - View or edit the source code of the content. Be aware that some HTML tags may be stripped out due to Drupal’s Text Format rules. Click About text formats below the editor to learn more.
  20. Special characters - Insert mathematical operators, currency symbols, punctuation, or graphic symbols not typically accessible from the keyboard.
  21. Language - Mark specific sections of the content as different languages so that browsers and screen readers can correctly interpret them. More info.

CKEditor 4 toolbar

The CKEditor 4 toolbar.

Demo Basic Text Formatting on CKEditor 4 >

  1. Bold Text - Ctrl+B (Windows) or Command(⌘)+B (Mac) or clicking/unclicking the B icon
  2. Italics - Ctrl+I (Windows) or Command(⌘)+I (Mac) or clicking/unclicking the I icon
  3. Underline - Ctrl+U (Windows) or Command(⌘)+U (Mac)or clicking/unclicking the U icon
  4. Strikethrough - Clicking/unclicking the S icon
  5. Alignment controls - Left, Center, Right, and Justify.
  6. Font Color - A small grid of swatches you can apply to your text. Overrides the default font-color
  7. Text Background color (not recommended)
  8. Font (should remain Cachet or Verdana to conform to YMCA brand standards)
  9. Font Size - A dropdown to select the size of your text. Measured in points, not pixels. Overrides the default font size for your text, including styles and format.
  10. Indent - Add one or more indents to your copy. Also, have the option to undo the indent.
  11. Format - A dropdown list of text formats you can apply to your content. Helps to create sections. Comes out-of-the-box with six heading formats.

Most Ys will not use the “Formatted” format, which styles text like HTML code.

  1. Bulleted/Numbered lists - Click the numbered or bulleted list icon to create a list. You can create indented bullets by hitting your tab key or clicking on the indent icon
Last modified August 23, 2023: DS-730 docs: Revise Text Editor section (72e1a4917)