Upgrading CKEditor from Version 4 to 5 in Drupal

About eight months ago, around November 2023, I updated this site from Drupal 9 to Drupal 10. The only thing I didn't update was CKEditor. I left the old version, number 4.

I mainly did this because I didn't want to deal with finding a solution for syntax-highlighted code snippets, as the site contains a lot of code snippets within the text. In CKEditor 4, I used the CKEditor CodeSnippet module, but that module didn't work with the new version of CKEditor.

Every time I visited the Available updates page in Drupal, I saw a note that CKEditor 4 is unsupported, and it started to annoy me. I had to do something.

So, I decided to check the situation with syntax highlight modules and, if possible, finally switch to CKEditor 5 in Drupal 10.

I revisited CKEditor CodeSnippet module, and the module page states that there won't be a release for CKEditor 5. So, that is out of the picture.

Another module I tried was Prism, but I didn't like it. The syntax highlighting didn't appeal to me. I also tried highlight.php, which works well, but I don't like that it doesn't allow you to choose a theme for code display.

Finally, I tried highlight.js Input Filter, which I like because it not only allows theme selection but also has a Copy button feature (which I haven't added to the site yet, but I plan to do so in the future). The only downside of this module is that it uses highlight.js, whereas the previous module uses the highlight.php library, which is better performance-wise since syntax highlighting happens on the server rather than in the browser.

In the end, I decided to go with the highlight.js Input Filter module. I'll see how this goes, and if I don't like it over time, I will try to find another solution.

How to update CKEditor from 4 to 5

First, check all contrib and custom modules that provide CKEditor plugins. Update contrib modules if new versions support the new CKEditor, and rewrite your custom plugins to be compatible with the new CKEditor. It's quite possible that you don't have any modules providing CKEditor plugins, so you might not need to worry about this step.

But just to be sure, you can use the CKEditor Plugin Report module to automatically check CKEditor plugins.

The only module I use on this site that has a CKEditor plugin is the Linkit module, and it's been compatible with version 5 for a long time, so I didn't have to do anything special.

Once you've done that and confirmed that you either don't have modules providing CKEditor plugins or all are compatible with CKEditor 5, install the new CKEditor 5 module (which is in the core) if you haven't already. Now you have to switch text editors from CKEditor to CKEditor 5. As you can see, Basic and Full text formats on my site are using the old editor.

Go to each text format on the admin/config/content/formats page that should use an editor (as you can see, some text formats are not using any editor), edit it, and change the Text editor from CKEditor to CKEditor 5 in the select box.

Now, test everything to make sure it works correctly. If it does, uninstall CKEditor 4 module and any other related modules. In my case, I also uninstalled the CKEditor CodeSnippet module using Composer:

composer remove drupal/codesnippet drupal/ckeditor

And then installed the highlight.js Input Filter module using the following command:

composer require drupal/highlightjs_input_filter

Enabling new code syntax highlighting is straightforward. Just click Highlight code using highlight.js on each text format page in the Enabled filters section.

And finally, if you want to change the highlight theme or enable/disable the copy button, go to the module settings page: admin/config/content/highlightjs_input_filter.

CKEditor 5 looks more or less the same as the old version, maybe a bit more modern. How it performs over time remains to be seen, but the code highlighting looks much better to me than before.

That's a wrap. My site is now using the new version of CKEditor and has a new module for highlighting code, and I don't have to look anymore at that annoying message that my version of CKEditor is unsupported. As far as I'm concerned, doing this update was worth it.