CKEditor 5 v16.0.0 with code blocks and restricted editing
We are happy to announce the release of CKEditor 5 v16.0.0 that introduces two major and frequently requested features. The developers will be happy to hear that they can now insert code blocks to their WYSIWYG editor. The new restricted editing feature allows you to create templates and restrict editing to chosen areas only. But there is more — so read on!
# New rich text editor features
The two features added in CKEditor 5 v16.0.0, code blocks and restricted editing, were high on the “most wanted” list for our community and customers alike, so we hope you will soon enable them in your setups. As always, we are looking forward to your feedback and are thankful for any comments, recommendations and bug reports that are coming our way.
Go through the list below to learn more about the new rich-text editor features and make sure to check out the demos and documentation that accompany them.
# Code blocks
With nearly 30 upvotes, code blocks were one of the most community-requested features. As a matter of fact, we were also keen to add them so that we could produce more developer-oriented content for our blog and other resources in our own WYSIWYG editor. So here they come!
A GIF is worth more than a thousand words:
You can paste code snippets from your IDE or write the code directly inside the editor. We wanted to make sure that the code editing experience is good despite the fact that we cannot embed a real code editor inside the WYSIWYG editor (because it could not be integrated well with other rich-text features like comments or track changes). The code blocks feature supports the Tab key for indentation (which is configurable) and automatically keeps the indentation level when you press the Enter key.
You can test it and learn how to install this feature in the Code blocks feature guide.
# Restricted editing
The restricted editing feature introduces two editing modes:
- Standard editing mode — Here the user can freely edit the content and choose regions that should be editable in the restricted mode.
- Restricted editing mode — Here the user can only edit the content within the regions chosen by the user in the standard mode.
You can imagine a workflow in which a certain group of users is responsible for creating templates of documents while a second group of users with restricted editing permissions can only fill in the gaps (for example, fill the missing data, like names, dates, product names, etc.).
Here is the standard editing mode in action — the user authors the document and marks the regions that should be editable:
Here is the restricted editing mode in action — the user can only edit the editable regions:
By using this feature, the users of your application will be able to create template documents. In a certain way, this feature could be used to generate forms with rich-text capabilities.
You can test it and learn how to install this feature in the Restricted editing feature guide.
# Improvements
Besides the new rich-text editor features, we have also prepared many improvements. Here are the most important ones.
- We made sure that CKEditor 5 can be built with webpack 5.
- Starting a line with an asterisk followed by a space after Shift+Enter should not trigger autoformatting.
- Focus indicator for a button should have a higher contrast ratio.
- Fixed blurry dropdowns on Chrome.
- Empty “spacerun” spans will not crash the paste from Word feature.
- Pasting content from Word with multiple spaces will not crash the editor.
- Pasting content from Word with lists disabled by inline styles will work correctly.
- Inserting (pasting or loading) content with blocks filled with
<br>s will not create superficial line breaks. - Fixed performance of
ImageLoadObserverwhich was heavily affecting the remove format feature. - Added an option to disable button grouping in the toolbar.
- It should not be possible to merge row or column headers to normal cells.
# What’s next?
We will continue working on new rich-text editing features and improving the existing ones along the way. The next features on our radar are:
And more! Follow the iteration 29 roadmap for the news and to learn more.
# 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 main 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.