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.
Icon Purpose Instructions
Bold Text
Bold Use sparingly. Do not use in place of proper headings.
Italicize Text
Italic Use sparingly. Can be hard to many users to read.
Remove formatting
Remove Format This 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 Rule Adds a straight line (used to separate content)
Add Table
Table Create a  table
Table Template
Table Template Choose between Searchable and Sortable Table
Alignment
Alignment Choose between left, centered, and right aligned. For best readability, should use left aligned.
Superscript
Superscript Changes selected text to a superscript
Subscript
Subscript Changes selected text to a subscript
Insert Link
Add Link Applies a link to selected text
Anchor
Create Anchor Add an anchor so that a jump link can be created
add bullet list
Add Bullet List Creates a bulleted list. Choose other style options from the dropdown menu
Add Ordered List
Add Numbered List Creates an ordered list. You can change the starting number if needed.
Decrease Indent
Decrease Indent Used primarily in lists to change the organizational structure.
Increase Indent
Increase Indent Used primarily in lists to change the organizational structure.
Make Quote Block
Create Quote Block
Link to video
Add Video Follow guidelines for  Embedding Videos
Add image
Add Image Follow guidelines for Working with Images
Undo
Undo Last Action Reverts page back before last action
Redo
Redo Last Action Reverses the undo action
Add proper heading
Add Heading Choose correct heading level from the dropdown menu
Update Styles
Styles Select styles for  links  (buttons)
View Source Code
View Source Code Only 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 Linkstyling:

View Website Manager Directory

View Site in Mobile | Classic
Share by: