Webinar: Level Up Your Drupal Content Editing with CKEditor Features

Sign up

7th developer preview of CKEditor 5 available

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

The 7th preview follows the 5th preview directly since iteration 6 resulted in an internal release. Last December we started a long process of rebuilding the project infrastructure which took us more than one month to finish. Hence, the 7th developer preview concludes 2 months of our work.

Project infrastructure

The work on the project infrastructure (the multi-repository architecture, translation service, release tools, etc.) was described in the January's "News and Updates" and we recommend reading that post for more details. Here, we will only focus on an update and conclusions.

We are using the new development environment, which features mgit2 and Lerna, since the middle of January. You can check out the updated Development environment guide for more information. It works great for us, especially since the major improvement for Lerna which sped up the installation time about 2-3x.

So far, we are very satisfied with the new setup and proud of our new tool called mgit2, which beautifully and quickly handles our multi-repo architecture. We hope that it will be adopted by more projects.

Finally, we see now in practice how a Webpack configuration that allows you to build in CKEditor 5 into your website or web application looks and works. We were also really happy to learn that it was possible for the community to actually figure out how to build CKEditor 5 even before we wrote any documentation :) (thanks, @IlyaSemenov!).

Other changes

During the last two months, we worked on so many features and improvements that only the more important or interesting ones are listed below.

Image styles

The image styles feature lets the developer configure what kind of styles are available to the user. By default, the feature is configured to provide the "full size" and "side image" styles, which we consider the most common scenario. We had some doubts whether the conceptual change from image alignment to a far more semantic and general image styles won't be too confusing, but we decided that this is the right way to go since content quality is our main goal.

Image styles screencast

Image alternate text balloon

Starting from this release it is also possible to add alternate texts for images via a dedicated balloon panel to satisfy an important accessibility requirement.

Image alternate text balloon

Button tooltips

Last but not least, toolbar button tooltips (showing relevant keyboard shortcuts, too) are now available to make it easier to distinguish features in case the icons representing them are not clear enough :)

Button tooltips screencast

Keyboard navigation

One of the most important aspects of accessibility is providing keyboard navigation support for the UI. We plan to work on full accessibility after version 1.0.0, but features like focus cycling need to be predicted in the UI library architecture so we have already started working on them. The current implementation is not complete, but we can be sure that it can be completed after 1.0.0 without introducing breaking changes.

Keyboard navigation screencast

Markers

Engine markers allow tracking meta information (like comments, other users' selections, etc.) in the editor content. The feature took us quite a lot of time and tickets to implement correctly because, as usual, the collaborative aspect made it incomparably more complex than how it would need to work in a normal editor.

We think, though, that this is the last big piece of the entire editor engine puzzle. This means that for version 1.0.0 the engine needs only garbage collection, some refactoring and stabilization.

Last but not least

Sample

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

What’s next — Iteration 8

Iteration 8 has already started. We will continue working on the image captioning feature and block quote support. In addition to that, we are finishing the release tools and the translation service. Last but not least, we are going to work on defining presets and builds.

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

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

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