« See all

Feature of the month - Spell and grammar check in CKEditor 5

Spell and grammar check plugin in CKEditor 5

One of the most dreaded things taught back at school was spelling. Whatever your mother tongue is, most of them tend to have certain sets of rules following certain patterns on how sounds should be transcribed into letters. Memorizing and employing them in real situations was probably somewhat nerve-wracking for many people. Of course, reading a lot and writing a lot does help, but is there anyone that has not mistyped a common word just because it is so common? And so commonly mistyped?

With the advent of the information age, when all the accumulated knowledge of humankind is immediately accessible, checking your spelling is a task by far easier. As word processing software started to push typewriters out of the market, a new function came into life. This phenomenon is commonly known as the spell check. Spell check is far more than a dictionary, it automatically applies grammar rules and spelling conventions to the processed text. You need not look for a word, the software does that and suggests the proper solutions.

The advantages of aided writing are hard to describe. It is not only a question of knowledge or habit. Sometimes mistypes or errors happen. It is a commonly recognized fact that screen-reading does not allow for mistake-spotting to the extent reading from paper does. Another benefit is speed and efficiency. More often than not writing is somehow timed. An important business deal is a serious thing and must be delivered on time and without any mistypes that may catastrophically change the meaning of some terms. A term paper should not only deal properly with the subject, but it must also showcase the student’s proficiency.

# CKEditor 5 spell, punctuation and grammar checking feature

Spell check on the go, showing all the possible orthographic and grammatical mistakes as you type, is an industry standard nowadays. Widespread as it is, it is not only included in word processors but in web browsers, phone message editors and countless other places online and offline all the same. It may be further enhanced with an autocorrect that automatically changes the most common mistakes, corrects abbreviations, and sometimes is a cause of laughter or misery. These tools speed up the writing and editing process and ensure the basic correctness before the text is sent to the professional that takes care of the final proofreading. More often than not, however, places like news portals and small academic outlets would not or cannot hire a proofreader. And then the spell checker becomes the frontline aide. CKEditor 5, our advanced WYSIWYG editor that you can implement in any software where you need an editing component, has got you covered here as well!

At the heart of CKEditor 5’s proofreading, spelling and grammar checking feature is the WProofreader system. It is an innovative tool that combines the “spell check on the go” functionality with a more advanced dialog UI. WProofreader is a commercial solution delivered by our longtime partner, WebSpellChecker.

# Distraction-free writing

“Spell check on the go” is an approach oriented at speed and efficiency. The feature will suggest changes, displaying a dialog when hovering over. This way the only interaction needed is a single click — you just accept, reject or dismiss the suggestion and keep on typing. This is excellent when time is a factor and is also a very comfortable, unobtrusive way to interact with the content.

Distraction-free spell and grammar check in CKEditor 5 WYSIWYG editor.
Distraction-free spell and grammar check in CKEditor 5 WYSIWYG editor.

Note the underlined words indicating a possible error. The red ones are spelling suggestions, while the blue ones refer to grammar, punctuation and style. A dialog that appears once you hover over an underlined word suggests possible replacements for a word the feature deems incorrect. The user may choose one of the suggestions or dismiss the whole case with a single click.

This dialog also offers additional functionality for spelling mistakes — you can add new words to your user dictionary with a single mouse click on the add icon located in the bottom right corner.

Spell check on the go - grammar check in CKEditor 5 WYSIWYG editor.
Spell check on the go - grammar check in CKEditor 5 WYSIWYG editor.

Grammar suggestions work the same way — a dialog box appears when hovering over, offering an explanation of the possible error and suggesting replacements.

This way editing is uninterrupted and fast. The spell check acts only when the user acts and once they activate the correction dialog, it is just a matter of a single click. Efficiency benefits much in this proofreading approach. A rich vocabulary offers more than one solution but all of this is streamlined for fast editing.

Also, note the small circled number in the bottom right corner of the WYSIWYG editor. It is handy information about the total number of mistakes found in the document being edited.

# Dedicated proofreading dialog

If comfort plays a more important role than speed, there is the proofreading dialog. It can be activated with the toolbar spell check dropdown option as presented below.

Proofreading dialog in CKEditor 5 spell and grammar checker.
Proofreading dialog in CKEditor 5 spell and grammar checker.

Turning it on brings a dialog similar to the on-hover one, but substantially larger. It is a detached, floating window that can be conveniently moved around as needed, which is especially important on small screens. However, it also supports accessibility, as moving it left may be more convenient for left-handed persons or more comfortable in the case of right-to-left languages. Please see it employed in an editing situation:

The large, floating dialog offers a more comfortable expierience.
The large, floating dialog offers a more comfortable expierience.

The large dialog offers the same information and suggestions as the on-hover one but in a larger, more easily readable form. There is also another functionality involved here and this is the suggestion navigator at the bottom. It shows the current number of unresolved cases together with arrows, allowing for quick jumping between the errors found.

The proofreading dialog is a perfect tool for proofreaders. If you would rather engage in a spell checking session after all the content is written, this is the solution. Just sit down, track the errors and eliminate them one by one with the help of the WProofreader engine in the ergonomic, efficient CKEditor 5 WYSIWYG editor UI. Skip suggestions, jump back and forth and resolve cases easily, whether they are typos, misfit semicolons or wrong tenses.

Just like with the hovercard, you can add new words to your user dictionary with a single mouse click on the add icon.

# Multi-language content support

With the introduction of the text part language feature with CKEditor 5 v27.0.0, it is possible to set more than one language for the content. Typically this would be the main language for most of the text and additional language (or languages) for specific parts of the content, but a document can be fully multilingual, too. These can be attributed with a language dropdown and span for specified selection.

What is more, the spell check feature can automatically detect the fragment’s language properly. It is enough to choose “auto” in the Settings > Dictionary dropdown in the WProofreader settings. Spelling and grammar (where available) suggestions will be displayed properly for each text fragment.

With the dictionary set to auto-detection, spelling mistakes are displayed properly for each language in CKEditor 5 WYSIWYG editor.
With the dictionary set to auto-detection, spelling mistakes are displayed properly for each language in CKEditor 5 WYSIWYG editor.

# Rich capabilities with powerful options

This feature works out of the box. Once installed and activated, it gives the user immediate access to a plethora of dictionaries, including the most popular ones like AI-based English (default), American English, Brazilian Portuguese, British English, Canadian English, Canadian French, Danish, Dutch, Finnish, French, German, Greek, Italian, Norwegian Bokmål, Portuguese, Spanish, Swedish and Ukrainian with spelling support. Grammar checking is available for most of these.

But this is only the basic set, as 150+ more languages are available infor download on the WProofreader. But this is not all! There are two additional specialized dictionaries that offer the legal and medical vocabulary for all the specific needs, like business letters and contracts as well as professional reports or academic writing.

Dedicated dictionaries - medical, legal

It is also possible to build your own custom dictionary. Apart from the user dictionary, updated in the process of using the spell checker, there is the possibility to upload a premade custom dictionary to the system. This one, supplied by the system administrator, can be made company wide and accessible to all users, ensuring enforcing the same writing and editing rules for all the team. This is great not only for less-popular languages but also for slangs or professional jargons that may be used in certain content types.

Additional proofreading settings, like ignoring mixed-case words, domain names or words containing numbers, are also available from the settings pane. These come in handy in the daily proofreading routines. All users familiar with bundled word processors will surely appreciate these.

A set of Webspellchecker options allows for customized experience.
A set of Webspellchecker options allows for customized experience.

# AI power harnessed to serve humanity

As the traditional spell checking vocabularies are constantly developed and expanded, a new era dawns on proofreading altogether. Its advent is heralded by the introduction of AI-based language engines for English and German.

Smart algorithms employed in this software offer a whole new quality, generating proofreading suggestions based on the context of the sentence. They provide more suitable suggestions that address mistakes far better. Comparative study shows that spell checking engines based on neural networks offer twice the quality of traditional solutions and can provide three times higher accuracy.

Using the AI-based English for spell checking (also available in CKEditor 5) provides better results compared to the regular English dictionary by making the suggestions more precise and better suited to the context. This helps the user produce better, richer content thanks to the power of modern programming solutions. With context-oriented suggestions, the feature is more than just a mere spell checker. And this is why the AI-based English is the default one for that language — to boost the quality of content delivered thanks to the employment of top-quality, modern tools.

# Accessibility

User comfort and convenience through flexible tools were already mentioned, but that is not all. The UI design of the CKEditor 5 spell checker is aimed at as high accessibility as possible to make it readable and easy to navigate for people with vision impairment. The proofreading dialog can be accessed and navigated from the keyboard, without the need to use the mouse.

The feature is compliant with WCAG 2.1 and Section 508 accessibility standards. This makes the proofreader a tool of choice for all organizations, where these guidelines are strictly enforced.

Keyboard support for greater accessibility of CKEditor 5's spell checker.
Keyboard support for greater accessibility of CKEditor 5's spell checker.

# Activating CKEditor 5 grammar and spell checking feature

The proofreading, spelling and grammar checking solution for CKEditor 5’s WYSIWYG editor is a premium feature and it needs to be activated first. To do so, please contact our sales team. Once you have a license key, the feature may be added to your CKEditor 5 build with the easy and fast online builder.

Whatever your professional proofreading needs may be, we offer a high-quality tool for both spell check and grammar suggestions. Whether on the go or as a dedicated tool, it is the most efficient and convenient way to take care of your content’s correctness.

This blog post is a part of the Feature of the month series. Please check how to boost productivity and speed, employing its real-time collaboration with comments and suggestion mode for online discussions and team cooperation or deliver the message better by using lists to organize the content. There are also more feature-oriented blog posts on using CKEditor 5 as a Markdown editor for faster and easier content formatting and forms with pagination and restricted editing that can later be easily prepared for printing with Export to PDF or further editing with Export to Word features.

Share this post

Linkedin Reddit
CKEditor 5 v27.1.0 with table and block quote nesting
Remote collaboration - How rich text editors can improve working from home