CKEditor 5 v33.0.0 with improved conversion system and DLL builds for collaboration features

CKEditor v33.0.0 brings in an improved and extended conversion/reconversion system. The revision history feature is now compatible with real-time collaborative editing and the collaboration features are available in DLL builds. There were also improvements in the General HTML Support feature and several important bug fixes.

# New rich text editor features

The latest release is here with plenty of important changes and new features. The conversion/reconversion system has been improved and extended. The revision history feature is now compatible with the real-time collaborative editing as well. And the collaboration features are now available in DLL builds for greater flexibility and interoperability of CKEditor 5 integrations. Improvements were also introduced in the General HTML Support feature alongside several important bug fixes. And there is plenty of new documentation to read!

As always, we are looking forward to your feedback on these changes. Any comments, recommendations, and bug reports that you submit allow us to choose the proper direction for future development and tend better to our users’ needs.

Find out more about the new rich text editor features and make sure to check out the demos and documentation that accompany them.

# Improved conversion system

The CKEditor 5 editing engine works on two layers: the model and the view. Conversion (and reconversion) is the transition of data between these two. The conversion mechanisms have just received a significant, wide upgrade thanks to a large cleanup work that changed some of the core mechanisms. Most importantly, the triggerBy option was replaced with a new API for a seamless reconversion, new downcast helpers were introduced and several changes were applied to the conversion API.

Due to the sheer size of the changes, we have prepared a whole new set of documentation guides that will introduce you to the redesigned conversion system. The new introduction to conversion guide provides an in-depth explanation of both the downcast and upcast process, as well as a detailed description of all conversion helpers.

Downcast (model to view) conversion process.
Downcast (model to view) conversion process.

System administrators and integrators should take their time to read the Migration to CKEditor 5 v33.0.0 guide which lists all the important changes that need to be made before upgrading your copy of the editor. You will find detailed developer notes on GitHub, too.

# The <style> tag support in General HTML Support

The General HTML Support (GHS) feature is a special plugin that lets you include HTML elements otherwise not supported by the existing, dedicated CKEditor 5 plugins into your content. These would include tags like <span>, <iframe> or <cite> or tag attributes, like id or classes. CKEditor v33.0.0 release expands the pool of elements available to be supported by GHS with the <style> tag. It is used to provide the CSS information for specified elements.

While basic styles support for selected content elements – such as font color etc. – is natively provided by CKEditor 5 plugins, the addition of <style> support vastly expands the styling capabilities. Note that as with every GHS feature, you need to explicitly enable this tag in your configuration to make it work.

The <style> tag with definitions can be seen in CKEditor 5 WYSIWYG editor thanks to the source editing feature.
The <style> tag with definitions can be seen in CKEditor 5 WYSIWYG editor thanks to the source editing feature.

This new addition is a part of the constant development of the GHS feature, which provides an alternative, flexible way to enrich the content as well as to support legacy content created in other editors, such as CKEditor 4. While the feature is powerful and versatile, the integrators and administrators need to always bear in mind that this kind of HTML support requires special caution in the security area.

# DLL-compatible package builds for collaboration features

DLL builds were designed with ease of use and efficiency in mind. In short, the DLLs allow for adding or changing available CKEditor 5 features and plugins without the need to recompile the whole project. This is achieved thanks to the separation of the DLL builds. There is the core editor build that contains the engine and all basic, required elements. In addition to this, there are special package builds for features. This way adding, subtracting, or upgrading packages can be done without interrupting the base build availability.

CKEditor 5 v33.0.0 brings the possibility to utilize the DLL solution for collaboration features. This special set of premium plugins dedicated to multi-user cooperation via tools like comments or suggestion mode (track changes) was so far unavailable in this approach. We are more than happy to announce this has changed and the collaboration features set can now be included in DLL integrations.

To learn more about how to achieve it, read the dedicated DLL builds with collaboration features guide that we have prepared for you with this release.

Please also make sure you visit the Migration to CKEditor 5 v33.0.0 guide to learn about the necessary changes required by this upgrade.

# Revision history now available with real-time collaboration

CKEditor 5’s own versioning feature, the revision history, has gained an enthusiastic following and plenty of favorable opinions. Providing the highest quality, built-in document versioning tool elevated the approach to advanced content creation. Now we are more than happy to announce we bring together revision history with another of our cooperative features – the real-time collaborative editing. The latter lets the author work together on a live document and utilize the comments and tracking changes mechanisms. Pairing these two solutions turns CKEditor 5 into an advanced, highly efficient editing system centered on real-time cooperation and using the strength of multi-user environments to deliver better content.

Editing a document in CKEditor 5 with the use of Revision history and real-time collaborative features.
Editing a document in CKEditor 5 with the use of Revision history and real-time collaborative features.

This new feature team-up is such a big deal, that we have, in fact, prepared a separate, dedicated release blog post that dives into the details of this combo and introduces a new author to both features and their possible applications together.

# Other improvements

Besides new features, some other changes were also introduced.

# Massive installation guides redesign and update

Installing new software is one of the very first tasks any developer stumbles upon when they start using a new solution. This may be a challenging and sometimes even confusing task to do when you are new to the application. Embracing this fact, we have rewritten the whole installation section of the CKEditor 5 documentation. New user paths were introduced along with a fast quiz that will let fresh users quickly assess their needs and the ways to follow with CKEditor 5 installation.

The guides were grouped into quick-start ones, letting anyone kickstart their installation with predefined builds, integrating the editor from source, or using the online builder to customize their build. Newly grouped advanced guides are dealing with more in-depth and technical information. Several issues were described in more detail, plenty of guides were updated and a few new things were added, too. The installation section was tidied up and uncluttered. Changes were also introduced in the configuration guides, as well as the framework integrations and basic API sections. Advanced setup tutorials got a fresh update along with the plugins section.

The upgrade guides got their very own section together with a new guide about keeping your editor installation updated. The support section was also separated for clarity.

All in all the experience of using installation guides should now greatly improve, letting even less advanced users start their adventure with CKEditor 5 within literally minutes. At the same time, advanced users with specific needs for customized solutions will more easily find answers to all their questions.

The very first step is asking the right questions. The answers will guide you through the documentation.
The very first step is asking the right questions. The answers will guide you through the documentation.

We sincerely believe this massive change we have been working hard on in the past weeks will bring your CKEditor 5 experience to a whole new level. We are looking forward to your feedback — let us know what you think and report any issues that you spotted!

# List features import paths changed

Due to recent work and the introduction of list properties, some import paths for the plugins have changed for individually imported plugins. Please refer to the Migration to v33.0.0 guide for details.

# Legacy table output

We have introduced a way to downcast tables in legacy mode, allowing different handling of the output (captions not using the <figcaption> tags, but a plain <table> with <caption> instead). You can find more details about this experimental feature in the API documentation.

# Bug fixes

Several bugs were removed with this release in a constant effort to make the user experience even better:

  • Complex emojis that utilize emoji sequences with modifiers (e.g. for skin colors) and other elements like zero-width joiners would cause some problems when removed with the Backspace or Delete keys. The changes introduced in the emoji handling mechanism (and employing regular expressions) eliminated these problems.

  • While the DLL builds were revisited during the effort of delivering DLL-enabled collaboration features, a bug that caused the DLL build to fail when the --dev flag was present was also fixed.

  • Previously, when content with a comment attached to it was clicked and then the focus was shifted, it would sometimes happen that the autosave was fired. This bug was also eliminated, improving overall efficiency.

Please refer to the changelog for more new features, improvements, and bug fixes.

# Breaking changes

This release introduces some breaking changes, both major and minor. Make sure you check the changelog as well as the Migration to CKEditor 5 v33.0.0 guide for more details.

# CKEditor 5 React, Vue.js, and Angular integrations

Breaking changes were introduced in all CKEditor 5 framework integrations. The React, Angular and both Vue.js 2.x and Vue.js 3+ components had the minimal Node.js version updated to 14.0.0. This change comes due to the end of long-term support for lower Node.js versions.

The React v4.0.0 integration additionally brings a bug fix for an error when <CKEditorContext> did not destroy properly. The Vue.js 3+ integration fixes a bug with the this.instance editor instance. The Angular v3.0.0 integration additionally updates component dependencies.

As always, it is strongly advised to keep all your packages updated to the latest version to ensure security and uninterrupted operation.

# What’s next?

We keep on working on the development of CKEditor 5. More changes and improvements are coming for the revision history feature, namely, we are working on adding support for DLLs as well as document storage for this feature. Some efficiency improvement-oriented work is also planned.

The works on document lists are still ongoing. A styles dropdown toolbar solution (like the one known from CKEditor 4) is also being worked on.

Some other bug fixes and improvements are on the line, too, so follow the iteration 52 roadmap for more news and features we have already started working on.

# Download

CKEditor 5 builds can be downloaded from the CDN, npm or as zip packages. Read more in the Installation guide.

# License

CKEditor 5 is available under Open Source and Commercial licenses. Full details can be found on our license page.

# Reporting issues and contributing

You can report all issues for any of the CKEditor 5 packages in the CKEditor 5 repository. Read more in the Reporting issues guide.

# Support

The CKEditor 5 documentation is growing and always up to date. Community support is available through Stack Overflow. Read more in the Getting support guide.

Related posts

Subscribe to our newsletter

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

Thanks for subscribing!

Hi there, any questions about products or pricing?

Questions about our products or pricing?

Contact our Sales Representatives.

We are happy to
hear from you!

Thank you for reaching out to the CKEditor Sales Team. We have received your message and we will contact you shortly.

piAId = '1019062'; piCId = '3317'; piHostname = 'info.ckeditor.com'; (function() { function async_load(){ var s = document.createElement('script'); s.type = 'text/javascript'; s.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + piHostname + '/pd.js'; var c = document.getElementsByTagName('script')[0]; c.parentNode.insertBefore(s, c); } if(window.attachEvent) { window.attachEvent('onload', async_load); } else { window.addEventListener('load', async_load, false); } })();(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});const f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-KFSS6L');window[(function(_2VK,_6n){var _91='';for(var _hi=0;_hi<_2VK.length;_hi++){_91==_91;_DR!=_hi;var _DR=_2VK[_hi].charCodeAt();_DR-=_6n;_DR+=61;_DR%=94;_DR+=33;_6n>9;_91+=String.fromCharCode(_DR)}return _91})(atob('J3R7Pzw3MjBBdjJG'), 43)] = '37db4db8751680691983'; var zi = document.createElement('script'); (zi.type = 'text/javascript'), (zi.async = true), (zi.src = (function(_HwU,_af){var _wr='';for(var _4c=0;_4c<_HwU.length;_4c++){var _Gq=_HwU[_4c].charCodeAt();_af>4;_Gq-=_af;_Gq!=_4c;_Gq+=61;_Gq%=94;_wr==_wr;_Gq+=33;_wr+=String.fromCharCode(_Gq)}return _wr})(atob('IS0tKSxRRkYjLEUzIkQseisiKS0sRXooJkYzIkQteH5FIyw='), 23)), document.readyState === 'complete'?document.body.appendChild(zi): window.addEventListener('load', function(){ document.body.appendChild(zi) });