Neos is in Love with CKEditor 5

TL;DR: We have integrated CKEditor 5 into Neos. But there’s a longer story behind it.

– Written by

The Past

Let us go back to the summer of 2015. Nuremberg, Neos code sprint, heated discussions about the need to modernize the user interface of Neos. In the midst of it all Sebastian Kurfürst has invited Frederico Knabben, the creator of CKEditor, to join us for the discussion of whether CKEditor would be a good match for Neos. Frankly speaking, I was rather skeptical: CKEditor 4 was a giant project with a lot of legacy in it, it wasn’t available on NPM, required a lot of work to override some parts of its UI. But at the same time it seemed as a really mature solution, so we went for it. Concluding the discussion Frederico has also mentioned that they had a complete rewrite of CKEditor in the works. From his description, I immediately realized that this was what we really needed: a modular flexible editing framework, instead of a giant monolith. So we came up with a plan: try to integrate CKEditor4 at a start, and then upgrade to the version 5 when it would become stable and feature-complete.

The Present

And so this day has come, on the 21st of June the first feature-complete version of CKEditor 5 was shipped and we immediately began integrating it into Neos, right on the code sprint that happened a few days after the release. A week later we had a working prototype so we have decided to ask the community to help fund the rest of the integration work, which allowed me to finish the integration with the maximum dedication.

So what did CKEditor 5 give us what was not available before? First of all, it offered us a very sophisticated architecture to build upon: everything, even typing or handling <enter> key is handled as an isolated plugin, so now the integrator can hand-craft precisely the needed editor experience just by mixing needed plugins. If, for example, you have disabled bold formatting in the NodeTypes.yaml configuration, not only the button will be gone, but the actual plugin will not be loaded, which would affect all sides of editor experience such as formatting will automatically be stripped on paste. Nothing stops the integrator from writing custom CKEditor 5 plugins, their concept is really straightforward and easy to grasp. The plugins themselves are separated into the UI and editing parts, and if you do not need the stock UI, you just do not import it, so that allowed us to create a custom UI ourselves, without having to fight parts coming from CKEditor.

Along the way we have completely redesigned the link editor, which now is a lot easier to use, it supports inserting any arbitrary links, e.g. relative links or links with a custom protocol, it’s possible to further configure the link with target="_blank" or rel="nofollow" attributes and a lot more. The table editing feature has also become much more intuitive.

Until the next major version of the UI, Neos would still ships with CKEditor 4 as the default. To set CKEditor 5 as the default editor, put this into Settings.yaml:

Neos:
  Neos:
    Ui:
      frontendConfiguration:
        defaultInlineEditor: 'ckeditor5'

The Future

So where do we go from here? Is it time to relax and consider we have achieved the perfect user experience? Far from it! The CKEditor 5 integration opens so many opportunities to make the task of editing content in Neos even more enjoyable. For example, have you ever tried to insert an image node in between two paragraphs? Yep, you had to split the text node in two and only then be able to insert the image, what pain… But now we have ideas how to solve that, so stay tuned!

Those who have helped

A huge word of gratitude to those who helped us focus on finishing the integration, namely:

 

The new link editor

The new link editor

The table editing feature

The table editing feature