Skip to main content
Drupal Documentation for SCLS

Main navigation

  • Home
  • How-To Info for Library Staff
  • Drupal 9
  • Help

Breadcrumb

  1. Home
  2. Drupal 9
  3. Content

CKEditor 5 Editing Toolbar Changes

CKEditor 5, available in Drupal 9.5 and required for the Drupal 10 upgrade, introduces many changes to the editing toolbar. Some examples:

  • Text alignment buttons are combined into 1 drop-button.
Image
Text-align button
Image
Text-align with dropdown activated
  • Number list gains a drop-button with extra options.
Image
Number list with options
  • Options that were previously available via a right-click menu or pop-up dialog have moved to a "balloon toolbar" that appears when you click on it in the rich text area. This includes:
    • Unlink button appears when you click on an existing link.
Image
Unlink button
  • Media align/caption/display options, previously available by clicking the "Edit media" button, appear when you click on an existing Media image.
Image
Media has a yellow outline when you hover over it
Image
Media balloon options
  • Table row/column/cell options appear when you click inside a table (avoid clicking an image or link inside the table, because that will activate the image/link toolbar instead of the table one).
Image
Table balloon
  • Table size/border/padding options are no longer available.
  • Maximize button no longer available. (Bug report)
  • Non-media-image editing options is not available, tentatively. Using Media images is recommended, with Layout Builder as the recommended tool for aligning images side-by-side.
  • Link balloon toolbar is missing the "Media Library" button (see below for alternate solutions).

Media Library button missing when inserting a link

The module that provides the "Media Library" button in the Link dialog is not yet compatible with the new version of the content editor (issue report).

Solution 1: Upload a document to the Media Library before you begin making edits to your content

  1. Select Manage > Content > Media tab.
  2. Use the Add media button to upload a document to the Media Library.
Image

Solution 2: Upload a document while you're editing content, with a workaround

  1. Click the Insert Media button.
Image
Insert Media button on toolbar
  1. Select the Document tab.
Image
Select Document tab
  1. Click Browse, select the file on your computer, and upload. 
  2. Save the media item that is created from your file. 
Image
Save document media
  1. Close the Add or select media modal window.
Image
Close the Media dialog
  1. Select text and click the Link button.
Image
Select text and click the Insert Link button
  1. Type the name of the file you just uploaded -- the Link dialog should auto-complete and find it.
Image
Link autocomplete with a document
  1. Select the file in the auto-complete list.
  2. Click the green checkmark to finish.
Image
Green checkmark saves

Book traversal links for CKEditor 5 Editing Toolbar Changes

  • Adding Content (Nodes)
  • Up
  • Changing Authoring information - Drupal 9
  • Blocks - Drupal 9
  • Content
    • Removing Formatting from Copied & Pasted Content
    • Adding Content (Nodes)
    • CKEditor 5 Editing Toolbar Changes
    • Changing Authoring information - Drupal 9
    • Editing Existing Content (Nodes) on Your Website
    • Events: Repeating dates - Drupal 9
    • Formatting Content
    • Links to Webpages and Files - Drupal 9
    • Making content sticky
  • Images - Drupal 9
  • Layout Builder - Drupal 9
  • Managing Media & Files - Drupal 9
  • Media Library - Drupal 9
  • Revisions (Drupal 9)
  • Webforms - Drupal 9
  • Webinars

Tags

accordion (1)
account (2)
anchors (1)
blocks (1)
cache (1)
carousel (2)
CKEditor (4)
configuration (1)
content types (1)
CSS (1)
disable rich-text (1)
Drupal 9 (18)
email (2)
embed code (1)
Entity Registration (5)
events (6)
file browser (2)
files (2)
files media (1)
folders (1)
formatting (2)
front page (3)
Google Analytics (1)
headings (2)
HTML (1)
iframe (2)
images (7)
imce (3)
Layout Builder (3)
link a pdf (1)
links (7)
login (1)
media (2)
menus (3)
nodes (1)
openid (1)
paste as plain text (1)
paths (4)
performance (1)
photo albums (1)
photo galleries (1)
redirects (3)
registration (5)
remove format (1)
repeat dates (2)
reports (1)
revisions (1)
sidebars (1)
site name (1)
slogan (1)
source (1)
sticky (2)
text formats (1)
themes (1)
toolbar (2)
URL aliases (4)
Webform (2)
widget (1)