Switch from CKEditor 4 to CKEditor 5 in Varbase ~9.1.0

triangle-exclamation
Not Supported Message in Old Sites, Which Still Using CKEditor 4

Follow With Steps to Update Varbase to ~9.1.0 With Drupal 10

Updating Varbase ~9.0 to Drupal 10chevron-right

Default Varbase 9.1.x is using Varbase Editor 9.2.x with CKEditor 5

circle-check

Complete the Update to Drupal 10 with CKEditor 4

Use "Vardot/varbase-patches": "~9.1.0" in the root composer.json file.

with Varbase ~9.1.0 CKEditor 4 and Drupal 10

circle-info

To keep using CKEditor 4 you need the following in the root composer.json file

"vardot/varbase-patches": "~9.1.0"

"drupal/varbase_editor": "~9.1.0"

Uninstall no Longer CKEditor 5 Supported Modules

Uninstall CKEditor Past Filter

triangle-exclamation

Uninstall Image Resize Filter

triangle-exclamation

Remove the "Image Resize Filter: Resize images based on their given height and width attributes" check in Rich editor, and Simple Editor, then uninstall it

triangle-exclamation

Add the Following Under Installer Patches

Add the Following Under Drupal Libraries

Enabled the CKEditor 5 Module

Switch Varbase Editor from ~9.1.0 to ~9.2.0

Use "Vardot/varbase-patches": "~9.2.0" in the root composer.json file.

with Varbase ~9.1.0 CKEditor 5 and Drupal 10

circle-info

Make sure to have the following in your system:

"vardot/varbase-patches": "~9.2.0"

"drupal/varbase_editor": "~9.2.0"

Enable the CKEditor 5 Paste Filter Module

Filter content pasted into the CKEditor 5 visual editor by searching and replacing with the power of regular expressions.

circle-info

This is a CKEditor 5 version of CKEditor Paste Filterarrow-up-right with additional features, most notably that the filters are fully configurable via a form interface and the filters can be configured individually for each text format. This module has been created as a separate project so that sites that are transitioning over to CKEditor 5 can have both modules installed easily, and to allow this project to evolve without needing to maintain compatibility with both CKEditor 4 and 5.

Switch Rich Editor Text Format to CKEditor 5

  • Navigate to "/admin/config/content/formats/manage/full_html"

  • Select "CKEditor 5" from "Text editor" dropdown.

  • Follow up with the needed changes then save configuration

Switch Simple Editor Text Format to CKEditor 5

  • Navigate to "/admin/config/content/formats/manage/basic_html"

  • Select "CKEditor 5" from "Text editor" dropdown.

  • Follow up with the needed changes then save configuration

Disable the CKEditor 4 Module

At Some point you will need to remove drupal/ckeditor module from the project, and make sure that it is no longer installed.

Remove All Not Supported CKEditor 5 Plugins and Modules

In case of having extra CKEditor plugins, further than the ones in Varbase Editor, follow with each plugin command button, action, filter. With the new update version

This will for sure, manage to have the full switch from CKEditor 4 to CKEditor 5

Known Issues When Switching to CKEditor 5

CKEditor 5 Stylesheets

Manage the stylesheets for the editor in project's sub theme

  • Issue #3346060arrow-up-right: Changed ckeditor5-stylesheets to false in Vartheme BS5 not to load with the admin theme