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.
Text-align button
Text-align with dropdown activated
  • Number list gains a drop-button with extra options.
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.
Unlink button
  • Media align/caption/display options, previously available by clicking the "Edit media" button, appear when you click on an existing Media image.
Media has a yellow outline when you hover over it
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).
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.

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

  1. Click the Insert Media button.
Insert Media button on toolbar
  1. Select the Document tab.
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. 
Save document media
  1. Close the Add or select media modal window.
Close the Media dialog
  1. Select text and click the Link button.
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.
Link autocomplete with a document
  1. Select the file in the auto-complete list.
  2. Click the green checkmark to finish.
Green checkmark saves