Upgrading your Drupal 7 website to CKEditor 5

By on

With CKEditor 4 reaching end of life on June 30, 2023 and the last published release having a number of known security vulnerabilities now is an excellent time to consider upgrading your Drupal 7 website to CKEditor 5.

Upgrading to CKEditor 5 will ensure that your site continues to remain secure into the future while providing content authors with a modern, fully featured, rich text editor.

1. Download the CKEditor 5 module and its dependencies

Download the latest version of the CKEditor 5 module included with your Nickel City Creative Drupal 7 support package. CKEditor 5 requires the Editor, Dialog and jQuery Update modules which will also need to be downloaded if they aren't already available.

Download and extract the CKEditor 5 module to sites/all/modules or sites/site-name/modules

Extract the downloaded archive(s) into your website's module folder, generally docroot/sites/all/modules/ or docroot/sites/site-name/modules/.

2. Enable the CKEditor 5 module

Select the checkbox next to CKEditor 5 and press the save configuration button.

Log in to the website as an administrator and visit the 'Modules' page at admin/modules. Select the CKEditor 5 module and press the 'Save configuration' button. If you do not have all of the required dependencies already installed, you will be prompted to enable additional modules. Select 'Continue' in order to automatically install them.

3. Configure CKEditor 5

Visit the 'Text editors and formats' page at admin/config/content/formats and enable CKEditor 5 for your desired text format(s).

Select the configure operation for the desired text format.

To enable CKEditor 5 for a text format, select the format's 'configure' operation.

Select CKEditor 5 as the format's text editor.

Look for the 'Text editor' field and choose the 'CKEditor 5' option.

CKEditor 5 default toolbar buttons.

When configuring a text format that does not have an associated editor, CKEditor 5 will use default settings that include a basic set of toolbar buttons which can be further customized.

Switching the editor associated with a text format from CKEditor 4 to CKEditor 5 will trigger an automatic upgrade process.

If the text format was previously associated with CKEditor 4, provided by the Editor CKEditor module, then it will be automatically upgraded to CKEditor 5 with toolbar buttons, plugins and settings configured to match their previous values as closely as possible.

Note: There is no automatic upgrade process when migrating from the CKEditor, CKEditor LTS or WYSIWYG modules. However, all of these modules store their data separately from CKEditor 5, so it is possible to view their existing settings and manually duplicate them into CKEditor 4 (allowing them to be automatically upgraded) or directly into CKEditor 5.

4. Verify that the editor is working as expected

After upgrading to CKEditor 5, it is important to check that the editor is working as expected. Make sure to verify:

  • All of the toolbar buttons appear and are functioning.
    Screenshot of the CKEditor 5 'Code Block' toolbar button being used to designate text as PHP code.
    Testing the 'Code Block' toolbar button.
  • The generated markup is styled correctly for both site visitors and content editors using the WYSIWYG editor.
  • Enabled plugins are configured correctly:
    • Heading restrictions are in place.
    • Custom styles are defined and available.
    • Manually editable HTML tags are declared.
    • List options are set.
    • Language values match your requirements.
  • Image handling is working:
    Screenshot of the CKEditor 5 'Image' button's plugin settings.
    Verifying the image upload settings.
    • Images can be embedded from a URL or uploaded from a user's computer.
    • Files are uploaded into the correct directory.
    • Restrictions on maximum file size and dimensions are in place and working properly.
    • Resizing can or can't be resized.
    • Images can be aligned to the configured positions.
  • HTML restrictions are properly applied, stripping unnecessary tags and properties while leaving the desired markup.

5. Cleanup

Once all of your text formats have been migrated to CKEditor 5, any existing WYSIWYG integration modules can be disabled, uninstalled and then removed from the modules folder by following the installation instructions in reverse.

Log in to the website as an administrator and visit the 'Modules' page at admin/modules. Unselect the WYSIWYG module(s) that should be disabled, along with any dependencies, and press the 'Save configuration' button. Dependencies must be disabled before their dependents, potentially requiring the process to be repeated multiple times.

Once all of the modules have been disabled, visit admin/modules/uninstall, select all of the disabled modules that should be uninstalled and press the 'Uninstall' button. These modules can then be removed from the filesystem at docroot/sites/all/modules/ or docroot/sites/site-name/modules/.

6. Reach out for additional help

If you need help with configuring CKEditor 5, migrating a large number of text formats, upgrading from a different WYSIWYG editor or adding functionality that is not currently available in CKEditor 5 for Drupal 7 then feel free to contact Nickel City Creative for additional support.

Tags: