CKEditor 5’s undiscovered treasures: 4 features you should know about

There are some CKEditor 5 premium features that clients simply cannot do without. Can you imagine CKEditor without Track Changes, Real-time collaborative editing, Revision History, Comments, Export to PDF/Word, or Spell checking?

But there’s much more in store than these top, most powerful CKEditor functionalities. Among over 200 features CKEditor provides, its users can find, and gain a lot with, some undiscovered treasures. They aren’t hidden - as both in-market consumers and potential clients can learn more about them by reading the CKEditor features overview or the complete features list in alphabetical order with very insightful descriptions. However, with so many good things available, it’s easy to miss or overlook something interesting and worth special attention.

In this article, we’ll shed some light on the lesser-known yet astonishingly beneficial CKEditor 5 functionalities truly worth discovering to make your WYSIWYG HTML editor experience fuller.

# Annotations display mode

The annotations are comments and suggestions that come as a part of the CKEditor 5 collaboration features system. Technically, an annotation is simply a note that you see when using features such as Comments or Track Changes - the displayed “balloons” of their respective data.

The Annotations plugin is a surprisingly powerful one as it allows you to manipulate the annotations for all editors. The annotations can be customized on many levels, including by choosing a relevant theme, template, or view for them. What can also be made, is the decision on picking the right annotations display mode - the ways to display comment threads and suggestion annotations. These include:

  • Inline balloons - perfect for mobile phones, and other narrow viewport solutions (such as customized user interface) as inline annotations only contain some basic information
Inline display mode is the default solution. It is used when the sidebar configuration is not specified.
Inline display mode is the default solution. It is used when the sidebar configuration is not specified.
  • Wide sidebar - displays comments and suggestion annotations, fitting the largest amount of information, and is the best solution when there’s enough space to use it
The wide sidebar can fit the largest amount of information.
The wide sidebar can fit the largest amount of information.
  • Narrow sidebar - a mid-way solution between inline balloons and the wide sidebar
The narrow sidebar is a compromise between the wide sidebar and the inline balloons.
The narrow sidebar is a compromise between the wide sidebar and the inline balloons.
  • Custom annotations UI - to display annotations in a way that is better suited to a given application

On top of that, multiple UIs can be activated at the same time, with various annotation sources displayed in different places. This way, the comments can be shown in the wide sidebar, and the suggestions - as inline balloons.

This flexibility and the availability of multiple options simply reflect what CKEditor really is - a powerful, full-featured solution that serves virtually all needs and all modern platforms. It can handle many tasks that similar editors are insufficient to and incapable of. And it offers many lesser-known features it’s definitely worth discovering.

# Find and replace

There are many features CKEditor 5 offers that save a lot of users’ time and effort immediately, and money in the long run. Productivity features that increase the effectiveness of work done repeatedly are topping the list here. Some of them include Autoformatting (uses Markdown shortcodes on the go), Autolink (turns pasted URLs into active links), Word and character count (this one seems self-explanatory), Spelling and grammar checking (no editor can get without one, nowadays), as well as the Mentions feature that brings support for smart auto-completion and tags.

Another one is the Find and replace feature that lets users search for and replace any text in the editor easily. A search query for words or phrases that were placed or written within the editor will highlight them and take the users to that very place right away. On top of that, these words or phrases can be replaced with new ones quickly. What’s more, the Find and replace feature offers various search criteria and can not only match whole words but also partial words and phrases, with respect to the letter case.

This feature is very useful in several use cases and circumstances. Firstly, one may only want to find a given word - to know how many times it has been used in a given text to prevent repetitions. And if the word is used too often in, say, a given paragraph, this particular instance can be replaced. Secondly, the user can choose to use the “Replace all” functionality - e.g. when the employee’s supervisor decides that the overtone of the existing word or expression is improper, when a brand name needs to be globally updated or a new version of a product has been released. It can be very useful for developers, who can rename a variable or function, with the cohesion of an edited piece of code ensured, too.

Additionally, particular words can be used in different ways or different contexts, and that is when the Find and replace plugin can help - by executing the replacement of a single word or some of these words. Case-sensitivity lets the editor replace only words inside a sentence but not at the beginning or only common nouns, if there are different occurrences of a word. And the other way round, of course, too!

The search and replace panel is user friendly and offers great efficiency.
The search and replace panel is user friendly and offers great efficiency.

Users can also replace whole phrases with a single click, and making tedious, repetitive changes is fast and easy - no need to scan many pages of large documents. Also, no worries that something gets overlooked - with Find and replace, every instance of a word sought (be it a name, variable, or function) is detected, which is particularly valuable in the case of code listings or legal documents containing sensitive data.

# Restricted editing

When using collaborative editing, you may need certain parts of content to be altered or filled in, while the others are kept intact. In such cases, it’s worth considering using the Restricted editing feature that restricts access to certain parts of the editor that can be edited by selected users only.

What does using the Restricted editing feature look like in practice? The authorized user that creates a piece of content - with a standard editing mode and all editing capabilities enabled - can further restrict editing to other contributors. Next, after switching to restricted editing mode, they can edit the content, but only within editable regions that were previously predefined. The function of typing and deleting within such spaces is made available by default, the user may, however, enable some additional features like bolding.

Once the editable regions are ready and edition mode is changed, the editor can fill in the data.
Once the editable regions are ready and edition mode is changed, the editor can fill in the data.

Defining which parts of a document are editable for given users can be very beneficial, with the creators’ level of control over content and peace of mind increased. The basic use case here is crafting a mail merge or a template of a document with some areas restricted for editing, and some editable for a group of users (designated operators) who can fill the gaps with some specific missing data, like names, dates, email addresses, etc. You can read this dedicated blog post explaining how to generate forms with rich-text capabilities, that can later be exported to portable, finalized documents to learn more.

# Read-only support

In the world of remote work and the extensive engagement of external collaborators, it’s easy to lose track of the content created. This may pose a serious threat to any organization as even minor or accidental alterations to the text could change the meaning of the output completely. Luckily, CKEditor 5 offers effective solutions to prevent such a scenario - features that enable controlling user permissions. One of them is the Read-only support.

In brief, this feature allows users to enter the editor and only be able to read the text, without the possibility to edit it. They can open particular files or other pieces of content, read, evaluate, and even copy them, but any modifications like deletions or overwrites, are impossible to make. This protects sensitive or confidential information included in things like important documents and financial reports, as well as software logs, and reprinted stories from breaches or violations.

Switching to read-only mode turns off editing features.
Switching to read-only mode turns off editing features.
Switching to read-only mode turns off the whole toolbar.
Switching to read-only mode turns off the whole toolbar.

There are also many situations in corporate life where only designated users should be allowed to modify the content, e.g. when working on contract proposals, or trade deals. However, there’s usually a much bigger team behind the whole project and the read-only mode is just a perfect means of letting them know about the document and keeping track of the current stage it is in.

Read-only mode is available out of the box, with no additional plugins required. User-based access restrictions may be imposed on a selected user or a group of users. CKEditor enables a dedicated locking mechanism for the read-only mode that guarantees that the user will not make the editor content editable by accident.

# Key takeaways

As you can see, it’s really good to know - and use - as many CKEditor features as possible to make the editing experience complete. It’s a fully-fledged WYSIWYG rich text editor that leads the market - not only in terms of the quality of the functionalities offered but also in their quantity. Among the hundreds of features it provides, there are the most powerful and premium ones like Real-time Collaboration, Track Changes, and Revision History, but also dozens of lesser-known functionalities that are available for free and can be very helpful in a variety of ways and use cases.

It’s also very beneficial to keep track of the improvements and enhancements to the existing features and the new ones released that CKEditor 5 offers and announces regularly.

Related posts

Subscribe to our newsletter

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

Thanks for subscribing!

Hi there, any questions about products or pricing?

Questions about our products or pricing?

Contact our Sales Representatives.

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.

piAId = '1019062'; piCId = '3317'; piHostname = 'info.ckeditor.com'; (function() { function async_load(){ var s = document.createElement('script'); s.type = 'text/javascript'; s.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + piHostname + '/pd.js'; var c = document.getElementsByTagName('script')[0]; c.parentNode.insertBefore(s, c); } if(window.attachEvent) { window.attachEvent('onload', async_load); } else { window.addEventListener('load', async_load, false); } })();(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) });