Report: 2024 State of Collaborative Editing

Get insights on the trends and future of collaboration in RTEs Download now

Read now

8th developer preview of CKEditor 5 available

We would like to let you know that the 8th developer preview of CKEditor 5 has just been tagged as version v0.8.0.

The 8th preview moves us a couple steps closer to the 1.0.0 in all aspects – stability, feature completeness, and infrastructure. Check out the updated sample and read further to learn more about the progress.

Image feature

The first version of image captioning is now available. We decided to go with automatically showing and hiding empty captions depending on the selection. It allowed us to keep the UI tight, but we certainly need to implement placeholders so we can indicate to the user what's that space below the image. We're working on this now.

Other than that, we are happy with how quickly we were able to integrate all features with nested editables (the caption is a nested editable). There are a couple of nuances left, but features such as the enter keypasting or backspace are properly limited by the nested editable boundaries.

CKEditor 5 v0.8.0 image feature animated gif

We also worked on the image toolbar – the text alternative icon was designed (because ekhm... we used a stock input icon previously :D) and we added toolbar separators, so this is the final effect:

CKEditor 5 v0.8.0 focus on text alternative icon

Stability improvements

As we add more and more features which use the editing engine and other parts of the editing framework we also need to work on encountered bugs. In this release, we fixed an issue which particularly well shows how non-trivial even the seemingly simple features can be. We recorded a screencast which shows what the editor needs to render when the user types space characters:

CKEditor 5 v0.8.0. screencast

All these operations need to be performed with various text composition methods (standard IME, combining marks, letter variants tooltip on MacOS) in mind. If you'd like to learn a bit more about nuances of the typing feature, I recommend checking out issues like 1234.

Infrastructure

As we close in on the 1.0.0 we need to work on various infrastructural topics. In the previous iteration, we reviewed various aspects of how CKEditor 5 will be developed and provided to the developers and we continue working on these topics.

Localization

The most important missing bit so far was localizability. A year ago, we designed how strings localization should work, but only this year we finally could work on a real implementation. The task turned to be more complicated than we expected but we have the first version of the translation service (strings extraction, integration with Transifex and integration with Webpack) working:

CKEditor 5 v0.8.0 localization image

If you'd like to help with translating the CKEditor 5 check out the project on Transifex.

Release tools

v0.8.0 is the first release which was prepared by our release tools. They automatically generate changelog entries based on merge commits (see e.g. the engine's changelog), suggest a patch/minor/major version bump, update all dependencies between packages and published all this to Github and npm.

Presets

In order to make it easier to create your own editor build we introduced presets. A preset is a set of plugins which can be loaded at once. Presets are implemented in form of plugins (because plugins can have dependencies) which means that they can be loaded in the same way as other plugins.

Right now we have just two presets – essentials (with the features which nearly every editor needs) and article (with the features which a typical article editor needs). We want to see whether we will introduce more presets and whether they will become popular. We also consider having just the essentials preset and dropping the rest as it may be hard to define meaningful presets.

Builds

Besides presets, we also want to provide ready-to-use, pre-configured editors – called CKEditor 5 builds. We began work on necessary improvements to the Editor class and expect to have first builds at the end of the next iteration.

Sample

We updated the basic CKEditor 5 sample that you can play with. Check out the developer preview of CKEditor 5 (version 0.8.0) on the CKEditor 5 GitHub.io page.

Feedback and collaboration

We are most excited about the project and would love to get some feedback about this early preview.

You can report all general issues in the main CKEditor 5 repository. Specific issues, like those related to the editing engine, should be reported in their respective repositories. Very general ideas and questions can be reported in the design repository.

Related posts

Subscribe to our newsletter

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

Input email to subscribe to newsletter

HiddenGatedContent.

Thanks for subscribing!

Hi there, any questions about products or pricing?

Questions about our products or pricing?

Contact our Sales Representatives.

Form content fields

Form submit

HiddenGatedContent.
Hidden unused field.

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.

(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) });