Categories
UT Drupal Kit

Changes in CKEditor 5

The UT Drupal Kit 3.11 release introduces a completely new version of the rich text editor bundled with Drupal, CKEditor.

CKEditor 5 is a complete rewrite from version 4, redesigned from scratch for a more usable and modern editing experience, as well as a more robust and customizable technical architecture. An overview of the changes in CKEditor 5 is available from the CKEditor help center.

This change should be completely transparent to the end users visiting sites powered by the UT Drupal Kit. For content editors, there are a few changes to both the appearance and functionality of the editor in CKEditor 5 that should be easy to navigate.

Toolbar changes

Overall, the CKEditor 5 user interface is very similar to CKEditor 4. The toolbar in CKEditor 5 has a more modern “flat design” appearance compared to CKEditor 4, with no visible edges around the buttons. The toolbar itself responds dynamically to the width of the browser screen, wrapping buttons onto additional rows as needed to accommodate narrower screens.

The arrangement of the buttons also is different in CKEditor 5, with the goal of putting more commonly-used buttons closer to the left side of the toolbar. A few options that were previously shown as separate buttons have been collapsed into a single button with dropdown options (e.g. text alignment).

Screenshot showing re-located buttons in CKEditor 5 toolbar
Screenshot showing re-located buttons in CKEditor 5 toolbar

New action for removing existing links in text

The “remove link” button from the CKEditor 4 toolbar has been removed in favor of a contextual action that is exposed by clicking on an existing link:

Screenshow showing option to remove a link in CKEditor 5
Screenshow showing option to remove a link in CKEditor 5

New Qualtrics button appearance

The custom button provided by the UT Drupal Kit for embedding a Qualtrics survey has a new appearance:

Screenshot showing new Qualtrics button appearance
Screenshot showing new Qualtrics button appearance

Cut/copy/paste buttons removed

All of the cut/copy/paste buttons from CKEditor 4 have been removed, in favor of directly using the native cut/copy/paste functionality in your web browser. This is due to changes in the security model for web browsers which limit access to the operating system’s “clipboard” where copy/pasted content is stored.

You can still directly access those commands under the “Edit” menu on your web browser, or using the standard keyboard shortcuts (Command-X, Command-C, Command-V on the Mac; Ctrl-X, Ctrl-C, Ctrl-V on Windows).

Screenshot demonstrating right-click contextual menu behavior in CKEditor 5
Screenshot demonstrating right-click contextual menu behavior in CKEditor 5

CKEditor no longer hijacks the browser’s “right-click” action to access any special contextual menus, so you can also right-click inside the editor window and access all of the native right-click options provided by your operating system and browser, which should include cut/copy/paste.

What is NOT changing

Other than the appearance of the CKEditor toolbar, order of the buttons, and the functionality of a few specific buttons, everything else associated with the UT Drupal Kit text editing experience should act the same. The same set of HTML tags and attributes are allowed in the various text formats provided by the UT Drupal Kit (Basic HTML, Full HTML, Flex HTML).

For questions about CKEditor 5, please use the available support options for the UT Drupal Kit.

By Paul Grotevant

Paul Grotevant is the Senior IT Manager of Web Content Management Solutions for Information Technology Services at the University of Texas at Austin.

Social Widgets powered by AB-WebLog.com.