DrupalCon Prague: The Arrival of CKEditor 5, Part I

All the Cool Stuff That Are Shipped In
CKEditor5 Styles Dropdown

DrupalCon Prague is over; time to evaluate the talks and sessions we have seen so far. Learn more about the upcoming Automatic Updates project, Project Browser, the integration of GitLab, and the update to CKEditor 5. In this article, I will focus on the benefits of the update to CKEditor 5.

Drupal is getting easier for editors

In his keynote, Dries stressed the desire to make Drupal easier for Site Builders and end-users. A series of new functionalities like Project Browser and Automatic Updates are part of this new strategy and will mainly assist Site Builders. The update to CKEditor 5 will be a game-changer for the regular end-user. What is there for editors to look forward to, and what is there for developers to look out for?

What to look forward to

The update to CKEditor 5 is a big deal, as one can tell by the number of sessions during DrupalCon Prague dedicated to this project. It is important to stress that CKEditor 5 is not a continuation of CKEditor 4 since CKEditor 5 has been written from scratch. It is an entirely new editor with different architecture and APIs. The new architect makes browser-specific bugs a thing of the past.

A lot of effort has gone into improving the UX and enhancing the user interface. In addition, they took care that the editor still works nicely on narrow viewports like mobile devices. One of the improvements I know my clients will be thrilled about is the improved media widgets. These now have a toolbar attached so end-users can quickly adjust their media and see the results in real time. Media can be placed by drag&drop implemented by the DragDrop plugin, which is a part of the Clipboard feature. Users can further align their images or scale those using the new toolbar.

Another default improvement is the new presentation of the Custom Styles dropdown. Instead of a list, the Styles button now shows a grit with the different styles and how they will look like. It will also become easier to export your body text to a .pdf file. Regarding this, I want to stress that pdf files often come with A11y problems, so we need to stay alert to keep our content accessible.

To further help editors work efficiently, they added custom transformations. It means you can define a string of signs to be transformed into a symbol or text while typing, for example, to change something like (c) to ©. Other valuable features include intelligent predictions and word suggestions.

The default integration of CKEditor for Drupal is great already, but you can add even more functionality by implementing contrib modules like showing word count or mentions plugins. CKEditor also offers Premium features, like advanced export to pdf or Word. It has even become possible to turn your CKEditor into a Google Docs-like editor using the very sophisticated Track Changes system and Review features available to Premium clients.

Read more

CKEditor 5 features overview: https://ckeditor.com/docs/ckeditor5/latest/features/index.html

Progress to Part II: Pitfalls Waiting on Your Way.


This article is contributed by Esmeralda Braad-Tijhoff, a developer at DICTU where she contributes to Drupal websites for the Dutch government. She keeps a special eye out for accessibility issues and stresses the importance of inclusive designs and content to clients and colleagues.

Note: The vision of this web portal is to help promote news and stories around the Drupal community and promote and celebrate the people and organizations in the community. We strive to create and distribute our content based on these content policy. If you see any omission/variation on this please let us know in the comments below and we will try to address the issue as best we can.

Advertisement Here