Using the Text Editor Interface

When editing text within a content type, editors will be able to use a text editor with a toolbar containing common editing options. This toolbar contains numerous options, many similar to those found in other text editors in software like Microsoft Word.

CKEditor 5 Interface

Pasting Text

It is common to receive text from another source (Word, email, Teams, etc.). Copying and pasting straight from that source into Drupal can pull in "bad code" that can break our Drupal styles. The best solution is to copy and paste the text into a basic text editor (like TextEdit-Mac or Notepad-PC) and then copy out of that application. It will remove any hidden code.

When pasting into Drupal always use:

  • Shift-Command-V (for Mac)
  • Shift-Control-V (for PC)

Icons Explained

The icons and their uses in CKEditor 5.
IconPurposeInstructions
Bold Text
BoldUse sparingly. Do not use in place of proper headings.
Italicize Text
ItalicUse sparingly. Can be hard to many users to read.
Remove formatting
Remove FormatThis will only removed the format that you've added in Drupal. It does not remove "code" copied in from other sources. 
Insert Horizontal Rule
Horizontal RuleAdds a straight line (used to separate content)
Add Table
TableCreate a table
Table Template
Table TemplateChoose between Searchable and Sortable Table
Alignment
AlignmentChoose between left, centered, and right aligned. For best readability, should use left aligned.
Superscript
SuperscriptChanges selected text to a superscript
Subscript
SubscriptChanges selected text to a subscript
Insert Link
Add LinkApplies a link to selected text
Anchor
Create AnchorAdd an anchor so that a jump link can be created
add bullet list
Add Bullet ListCreates a bulleted list. Choose other style options from the dropdown menu
Add Ordered List
Add Numbered ListCreates an ordered list. You can change the starting number if needed.
Decrease Indent
Decrease IndentUsed primarily in lists to change the organizational structure.
Increase Indent
Increase IndentUsed primarily in lists to change the organizational structure.
Make Quote Block
Create Quote Block 
Link to video
Add VideoFollow guidelines for Embedding Videos
Add image
Add ImageFollow guidelines for Working with Images
Undo
Undo Last ActionReverts page back before last action
Redo
Redo Last ActionReverses the undo action
Add proper heading
Add HeadingChoose correct heading level from the dropdown menu
Update Styles
StylesSelect styles for links (buttons)
View Source Code
View Source CodeOnly certain users have access to this option to view the HTML code.

Table Template Styles

Learn more about creating and styling tables.

Sortable Table

This style allows the user to sort the table by column headings.

Sortable Table

Searchable Table

This style allows the table to be searched by any data in the table. It included the "sortable" style.

Searchable Table

Buttons and Links

You can choose to style your link as a green button, white, button, or action link.

link and button styles

Examples

Green Button

Use with light colored backgrounds.

Meet Our Team

White Button

Use with dark colored backgrounds.

Meet Our Team

Action Link

For longer labels, use Action Link styling:

View Website Manager Directory