CKEditor 5 v31.1.0 with enhanced copy and paste and reconnection handling
The last CKEditor 5 release of 2021 brings better and safer handling of collaboration sessions, enhanced pasting, better link edition, and improved documentation. There are also further improvements to the search and replace feature as well as additional information about features’ output. Read on to get to know these new changes and more!
# New rich text editor features
CKEditor v31.1.0 brings several highly convenient changes that will surely enhance the overall editing experience. Here is a short recap:
- Reconnecting a collaboration session after a connection outage is now more reliable.
- A new way to handle cutting, copying, and pasting on Windows with the use of Shift+Delete brings in a more natural, uninterrupted flow while editing.
- A link-related behavior has been corrected and while pressing Cmd/Ctrl when clicking a link, it will open the link in a new tab (while a regular click invokes the link toolbar).
- The editor features’ output listing has gotten a new indicator, now showing what kind of output is default — programmers and integrators will surely appreciate this additional data.
- Last but not least, we have added a brand new full-featured editor sample to the documentation, making it easy to test plenty of editor features in one place.
There were also several bug fixes that affected selection, find and replace, or balloon toolbar buttons handling on mobile Apple devices. Read on to learn more about all that and also the breaking changes introduced with v31.1.0!
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.
# Changes to the reconnection process
If during the real-time collaboration the internet connection goes down for some time, the editor should switch to read-only mode. After the connection is back, the real-time collaboration plugin will try to reconnect the editor back to the editing session. This reconnection process may involve re-creating the editing session (if the reconnection happens after a longer period of time).
In CKEditor 5 v31.1.0 we have changed the way the reconnection process is carried on, to make it more reliable if there are large differences between the saved offline session of the disconnected user and the live session online. We have also made the reconnection to an existing session safer.
# Opening links in editor
CKEditor 5, like every rich text editor, is all about editing. This is no exception for links and URLs inside the content. When clicked, a dedicated link toolbar appears enabling the editor to change or remove the link. Sometimes, however, editing is all about not exactly making changes, but also about trying them out. And sometimes when you click on a link inside CKEditor 5 you just need to open it. This is why we have added the Cmd/Ctrl + click handler which will make the link open in new browser tab instead of invoking the link editing toolbar. An alternative, accessible way to achieve the same effect would be to use the Alt + Enter keystroke that will open the URL in a new tab all the same.
# Default features’ output
The features’ HTML output listing provides information about what kind of output is produced by various features and plugins. As such, it is an invaluable tool for developers and integrators alike. In order to improve the developer experience in this area, we have added an indicator to the list, marking the default output of each feature (if there is such). This should help everyone dealing with handling the output get a grip on the way things are generated in CKEditor 5 easier and make their work more efficient without the need for lengthy tests and doing things by trial and error.
# Better cutting and pasting
Windows users are used to the Shift+Delete and Shift+Insert keystrokes for the cut and paste operation. However, before v31.1.0 CKEditor 5 did not support these keystrokes and only Ctrl+X performed the cut. With these new changes, whatever was cut with the Shift+Delete keyboard shortcut gets stored in the clipboard now and will be pasted.
# New and updated documentation
Default output is just one updated guide, but we also have new stuff in the treasure chest. The CKEditor 5 package generator got its very own guide and it has been updated, too. This is great news for all the developers who would like to start working on their own plugins. This handy tool provides a development environment that will make this task much faster and easier to kickstart. And while you’re at it, have a look at the updated testing environment guide for tips on how to ensure you write proper CKEditor 5 code.
# Full-featured editor demo
All that, however, is just a starter for our newest undertaking. After a few weeks of tinkering, adjusting and working on the content, we are ready and glad to present: the full-featured editor demo available for tests in the examples area of the documentation. It allows the users to try out most of our features and see them in action in one place. This is part of the large effort to restructure and improve CKEditor 5 documentation that we started a few weeks ago (you may have noticed some of the improvements already) and more changes and new editor examples will soon follow.
You may notice that the demo does not contain any collaborative features such as comments, track changes or revision history. This is deliberate — you can expect more such examples that will cover both real-time and non-real-time editing cases really soon!
# CKEditor 5 in Drupal
We are more than happy to announce, that CKEditor 5 — after a long period of hard work both on our and Drupal side — has been accepted as the future default editor for the open-source CMS system Drupal. As of version 10, the CKEditor 5 WYSIWYG editor will be the default system to create and edit content for this great, robust content management solution.
As for now, an experimental official CKEditor 5 module has recently been added to Drupal 9.3 so you can already try it out to get the feeling of what will come soon.
We would like to thank the Drupal team for their engagement in this project — it has been a long road and we are extremely happy to be able to reach this milestone together!
# Other improvements
Besides new features, we have also worked on some important improvements. These include — but are not limited to — several important bugfixes.
# Ballon toolbar buttons on iOS Safari
When selecting content in the ballon or ballon block type editor, the selection marker overlapped with a part of the toolbar button, making it very difficult to tap it. This was corrected and the toolbar is now properly accessible and usable.
# Better finding
In certain cases the find and replace feature had troubles finding the search text if it was located twice beside. If, for example, you would search for Duran Duran, it only found the first occurrence. This was corrected and now the history of music is safe.
Please refer to the changelog for more new features, improvements and bug fixes.
# Breaking changes
This release introduces some minor breaking changes. Make sure you check the changelog for more details. Visit the Migration to v31.1.0 guide, too, for details on introducing the changes in your CKEditor 5 installation.
# What’s next?
We keep on constantly improving and adding new features to our software. The new reconversion system and real-time collaboration support in revision history are some of the most awaited enhancements that are coming live soon. Same goes for the support for list
reversed attributes. Migration to Node 14 and upgrade to webpack 5 will surely make the developers happier. Some other improvements are on the line, too, so follow the iteration 50 roadmap for more news and features we have already started working on.
CKEditor 5 is available under Open Source and Commercial licenses. Full details can be found on our license page.