CKEditor 5 v16.0.0 with code blocks and restricted editing

CKEditor 5 release

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:

Creating code blocks in CKEditor 5 WYSIWYG editor.
Creating code blocks in CKEditor 5 WYSIWYG editor.

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:

Marking regions to be editable in CKEditor 5 WYSIWYG editor.
Marking regions to be editable in CKEditor 5 WYSIWYG editor.

Here is the restricted editing mode in action — the user can only edit the editable regions:

Restricting editing to chosen regions in CKEditor 5 WYSIWYG editor.
Restricting editing to chosen regions in CKEditor 5 WYSIWYG editor.

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.

# 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.

If you have enjoyed reading this, be sure to check out our other blog posts

Subscribe to our newsletter

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

We use cookies and other technologies to provide you with a better user experience.

Learn more

Hi there, any questions about products or pricing?

Any questions about our products or pricing?

Send us a quick message and one of our Sales Representatives will be in touch with you as soon as possible.

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.