Proofreading, Spelling and Grammar Checking

CKEditor 4 can be configured to use either native spell checking capabilities provided by the browser or to use an external spell checking web service.

# Native Browser Spell Checker

By default, native browser spell check functionality is disabled in the editor. Use the config.disableNativeSpellChecker configuration option to enable it:

config.disableNativeSpellChecker = false;

After reloading the editor you should be able to see the spelling corrections underlined in your editor content.

Note: If the Context Menu plugin is enabled, it is necessary to hold the Ctrl key when right-clicking misspelled words to see their suggestions.

Note: The spell check functionality is not available natively for all browsers.

# Spell Check As You Type (SCAYT)

The SpellCheckAsYouType (SCAYT) plugin provides inline spelling and grammar checking, much like the native browser spell checker, well-integrated with the CKEditor 4 context menu.

It is provided by WebSpellChecker. It uses the WebSpellChecker web services, transferring the text to their servers and performing spelling and grammar checking. This is a cross-browser solution.

# Distraction-free Proofreading

WProofreader SDK is an AI-driven, multi-language text correction proofreading tool. It offers the functionality of handy as-you-type and in-dialog proofreading options in a modern, distraction-free UI. Spelling, grammar, and punctuation suggestions are available on hover as you type or in a separate convenient dialog aggregating all mistakes in one place.

The WProofreader badge in the bottom-right corner shows you the total number of mistakes detected. Hover an underlined word to display the WProofreader suggestions for any of the spelling and grammar mistakes found. The suggestion card allows the user to employ the feature on the go.

If you want to see an overview of all mistakes, click the “Proofread in dialog” icon in the badge. It will invoke a detached floating dialog, which is easy to navigate and perfect for dedicated proofreading sessions. 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. 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.

In order to use the WProofreader, you need to add a few lines of configuration to your editor:

window.WEBSPELLCHECKER_CONFIG = {
    autoSearch: true,
    theme: ‘gray’, // changes default theme to gray
    serviceId: 'your-service-ID', // required for the cloud-based version only
    serviceProtocol: ‘https’,
    servicePort: ‘443’,
    serviceHost: ‘svc.webspellchecker.net’, // needs to be changed for the on-prem version
    servicePath: ‘api’
};

And load the following script on your site:

<script type="text/javascript" src="https://svc.webspellchecker.net/spellcheck31/wscbundle/wscbundle.js"></script>

WProofreader is a commercial solution, so you need to purchase a license and then add your serviceId to the configuration. You can also request a free trial ID.

For more detailed documentation, refer to the official WProofreader “Getting Started” guide.

# Supported Languages

# Language support

The most popular languages offered by WebSpellChecker solutions include: American English, Australian English, Arabic, Brazilian Portuguese, British English, Canadian English, Canadian French, Danish, Dutch, Finnish, French, German, Greek, Hebrew, Italian, Indonesian, Norwegian Bokmål, Norwegian Nynorsk, Portuguese, Spanish, Swedish, Turkish, and Ukrainian. There are, however, more languages available from the WebSpellChecker site. Grammar checking is available for over 20 languages.

The AI-driven approach for English, German, and Spanish is a recent addition to the software. It offers a far better checking quality, and generates proofreading suggestions based on the context of a sentence. It provides more suitable suggestions that address mistakes with 3 times the accuracy compared to a traditional mechanism.

Here you can check the full list of available languages.

# Specialized dictionaries

Apart from the language dictionaries, WebSpellChecker offers two specialized dictionaries: medical and legal.

# Custom dictionaries

Custom dictionaries can be used in two ways.

One is the user-level dictionary that can be expanded during the regular use by adding new words. This is a perfect solution for users working on specific content that may contain slang or professional jargon.

The other is the so-called company-level dictionary. These premade dictionaries can be uploaded by system administrators or CKEditor 5 integrators and made available across the company, accessible for all users. This way all benefits of a user-generated dictionary can be shared among the team, making the proofreading process more structured and controlled.

# Multi-language Support

If you have content in multiple languages, the spell and grammar check feature can automatically detect the text language properly. It is enough to choose “Auto Detect” in the Language dropdown of the WProofreader settings. Suggestions for spelling,grammar, and punctuation (if available) will be displayed properly for each text fragment.

# Customization Options

The SCAYT plugin includes numerous configuration options that let you customize the default spell checking language, the number of SCAYT suggestions available or the content of the spell checker context menu.

You can find them on the CKEDITOR.config API page, starting from scayt_.

# Spell Checking Demo

See the working “Proofreading, Spelling and Grammar Checking” sample that showcases all official spell and grammar checking solutions.