Posted on:

Drupal & CKEditor: taking content editing to the next level

Drupal & CKEditor: taking content editing to the next level

We are happy to announce that CKEditor 5, a modern, versatile WYSIWYG editor is coming as the default editor with the upcoming release of Drupal 10, the top open-source web content management platform, planned for December 2022. It is the crowning of a two-year long, massive undertaking and hard work on both the CKEditor and Drupal side by dedicated teams. The process took plenty of time, resources, and skills, but the result is a state-of-the-art digital experience platform, the best there is on the web.

# CKEditor 5 becomes the default editor in Drupal 10

CKEditor was completely rewritten from scratch for the new version to avoid problems with older code solutions brought over from version 4. This is why it took almost two years to complete all the work required in order to seamlessly integrate CKEditor 5 with Drupal and guarantee the desired developer and user experience.

Currently, CKEditor 5 is already an experimental module (available since Drupal 9.3) and allows the users to try it out without having to wait until Drupal 10 is officially available. Once it happens, CKEditor 5 will be the default and the only WYSIWYG editor available in the core of Drupal.

# Premium features module with collaboration

However, what’s really amazing is the fact that from now on Drupal users will not only be able to use the core editor features but also the CKEditor 5 Premium Features (to be purchased additionally).

The CKEditor 5 architecture was designed from scratch to bring collaborative editing features that allow multiple authors to work simultaneously or asynchronously on the same rich text document. The Premium Features include: Real-time Collaboration, Track Changes, Comments, Revision History, Export to PDF and Word, Spell-checking, Pagination, and Math equations.

The track changes feature brings automatic suggestion marking for the document as you change it. When editing the document, the user is able to switch to the track changes mode. All their changes will then create suggestions that can be accepted or discarded. The revision history feature is a document versioning tool that allows CKEditor 5 users to create and view the chronological revision history of their content. The preview mode allows for easy viewing of content development over time.

The comments feature lets the users add side notes to marked fragments of the document, including text and block elements such as images. It also allows the users to discuss in threads and remove comments when they finish the discussion.

And the best part? The CKEditor 5 real-time collaboration features let you customize the editor to include real-time collaborative editing, commenting, suggesting and revision history features and tailor them to your needs. By combining the power of collaborative features you can create a full-fledged Google Docs-like experience. This is not all, yet, as CKEditor 5 provides exports to both the world’s most popular Word format, as well as the portable, industry-standard PDF format.

And we have an advanced, working prototype of the Drupal module already that ships most of these premium functionalities! Both real-time collaboration and non real-time collaboration versions are functional. The RTC requires some more polishing to adjust it to the Drupal ecosystem. A whole, new notification system will also be introduced, letting the editors and writers always be up-to-date with the state of the content.

Creating this module was a serious challenge due to the requirements, but it was also a great opportunity to test the flexibility and scalability of our solutions, as well as the ability to tailor these to external applications.

# CKEditor 5 in Drupal 10 - a quick look at the work done

CKEditor 5 is a completely new piece of software, so the implementation of plugins and modules that were crucial for Drupal had to be done anew. There were several things that we simply had to reinvent and write from scratch, as they were not available in the feature pool of CKEditor 5 when the integration work was just beginning.

# New better UI

First of all the new editor comes with a new better UI and improved user experience.

# Media widgets with dedicated toolbar

Media widgets have now a dedicated balloon toolbar attached, allowing users to quickly adjust embedded media.

Links have now a ballon panel attached to them, too, allowing users to quickly see the link URL and manage it.

# Styles dropdown reworked

The styles dropdown has been reworked to let you present nicely how each specific style will look like.

# Document lists

The greatest challenges surely were the General HTML Support feature, as well as document lists. These two, especially, tested the boundaries of CKEditor 5’s architecture flexibility. Styles dropdown, on the other hand, posed a serious challenge as a product on the user side of thing. Plenty of other features, large and small, were added, too.

# Autoformatting

We introduced some productivity enhancements such as autoformatting, where you can use the markup similar to markdown within the editor to make lists or quickly format the text.

# Transformations

Another similar, but even more powerful feature: transformations. For example, you can surround C with parenthesis and convert it to a copyright sign automatically. This is also a great tool for auto-correct rules to be introduced.

# Large community involved

A large community was involved in this switch on the Drupal side. At any given time, at least three developers worked full-time on bringing the new CKEditor 5 features up to Drupal’s precise and demanding standards and the number of people involved at once rose up to seven people in the case of some more trying features. Altogether a dozen programmers contributed meaningful amounts of code to the project over the past two years.

Piotrek Koszulinski from CKEditor and Wim Leers from Drupal used to work together to bring CKEditor 4 into Drupal 8 back in 2012. A decade later they, again, paired their powers to bring CKEditor 5 into Drupal 10.

Having Drupal as a client was very helpful, as some work could be client-oriented and the scope, aims, and reach was clearly set. The main attention was paid to the seamless and easy switch from CKE4 to CKE5.

# More on Drupal & CKEditor cooperation

Drupal is an advanced open-source Content Management System written in PHP. CKEditor 5 is an open-source WYSIWYG rich-text editor written in JavaScript. CKE5’s predecessor, CKEditor 4 was already a part of Drupal since version 8. However, years have passed since CKEditor 4 was included in Drupal core and the editor is slowly going to reach its end-of-life date. A change, therefore, was both very much needed as well as unavoidable. We are proud and happy to announce that CKEditor 5 was chosen to be the successor and the default editor in the upcoming Drupal 10.

# CKEditor at DrupalCon in Prague

After DrupalCon Portland earlier this year, we will once again be exhibiting at DrupalCon – this time, in Prague! Our session on “CKEditor 5 in Drupal 10: what is there to be excited about?” will be presented by Wiktor Walc again.

If you are interested in customizing your CKEditor module in Drupal further or would like to learn more about how you can empower your users with collaboration, drop by booth #7 – our team will be there! Come to say hi and feel free to ask any questions you might have.

Would you like to schedule a meeting with us in Prague?

If you have enjoyed reading this, be sure to check out our other blog posts

Subscribe to our newsletter

Keep your CKEditor fresh! Receive updates about releases, new features and security fixes.

We use cookies and other technologies to provide you with a better user experience.

Learn more