Contribute to this guide

guideProofreading, spelling and grammar checking

The spell checker for CKEditor 5 is a commercial solution provided by our partner, WebSpellChecker. You can report any issues in its GitHub repository. The license can be purchased here.

WProofreader is an innovative, multi-language proofreading tool that combines the functionality of “spell check as you type” and “spell check in a dialog” in a modern, distraction-free UI. Spelling and grammar suggestions are available on hover with no clicking needed or as a convenient dialog, both with additional in-place replacement suggestions.

You can fine-tune the spell checking rules via the dedicated settings menu. You can choose from a set of predefined languages (more may be added as language packs) and manage additional dictionaries. Words can be added to the user dictionary directly from the suggestion card, too.

If needed, the spell checker can be easily disabled and enabled again with a click.

# Demo

See the spelling and grammar checking in the editor below.

The proofreader badge in the bottom-right corner shows you the number of mistakes detected. Hover an underlined word to display the proofreader suggestions for any of the spelling and grammar mistakes found. If you want to see an overview of all mistakes, click the “Proofread in dialog” option in the toolbar dropdown. You can access the proofreader settings from the toolbar, too.

The toolbar button has been introduced in version 2.x of the WProofreader. Read more about configuring UI items in the toolbar guide. If you are still using version 1.x, the available settings and dialog options can be accessed through the bottom-right badge.

Warsaw is the capital adn largest city of Poland. The metropolis stands on the Vistula River in east-central Poland and its population is officially estimatd at 1.8 million residents within a greater metropolitan area of 3.1 million residents, which makes Warsaw the 7th most-populous capital city in the European Union. Warsaw is an alpha-global city, a major international tourist destination, and a significaant cultural, political, and economic hub. Its historical Old Town was designated a UNESCO World Heritage Site.

Warschau ist seit 1596 die Hauptstadt Polens und die flächenmäßig größte sowie mit über 1,75 Mio. Einwonern bevölkerungsreichste Staddt des Landes. Als eines der wichtigsten Verkehrs-, Wirtschafts- und Handelszentren Mittel- und Osteeuropas genießt Warschau große politische und kulturelle Bedetung. In der Stadt befinden sich zahlreiche Institutionen, Universitäten, Theater, Museen und Baudenkmäler.

Варша́ва является столицей и крупнейшим по населению, и территории городом Польшй. Город стал фактической столицей в 1596 году, коггда после пожара в Вавельском замке в Кракове король Сигизмунд III перёнёс свою резиденцию суда, при этом столичный статус города был подтверждён только в Конституции 1791 года. Через город протекает река Висла, разделяющая город приблизительно поровну.

# Multi-language support

As seen in the demo, the spell checking and grammar feature can support multilingual content. If the proofreader language is set to Auto Detect (or the auto language is set in the configuration), the feature will automatically recognize the text language and suggest error corrections and grammar specifically for that language.

Setting the spell checker dictionary to auto.

# Supported languages

By default the spell checker supports 18 languages: 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. Grammar checking is available for 16 of them — there is no grammar checking for Finnish and Norwegian.

There are also over 150 additional languages and specialized dictionaries such as medical and legal available for an additional fee. You can check the full list here.

# Installation

WProofreader is delivered as a CKEditor 5 plugin, so it can be combined into an editor build as other features. To add this feature to your rich-text editor, install the @webspellchecker/wproofreader-ckeditor5 package:

npm install --save @webspellchecker/wproofreader-ckeditor5

Then, add it to your plugin list and the toolbar configuration:

import WProofreader from '@webspellchecker/wproofreader-ckeditor5/src/wproofreader';

ClassicEditor
    .create( editorElement, {
        plugins: [ ..., WProofreader ],
        toolbar: [ ..., 'wproofreader' ]
    } )
    .then( ... )
    .catch( ... );

Read more about installing plugins.

At this step, it is required to provide a proper configuration. The proofreader can be used either as a cloud solution or hosted on your own server.

# WProofreader Cloud

After signing up for a trial or paid version, you will receive your service ID which is used to activate the service.

Add the following configuration to your editor:

import WProofreader from '@webspellchecker/wproofreader-ckeditor5/src/wproofreader';

ClassicEditor
    .create( editorElement, {
        plugins: [ ..., WProofreader ],
        toolbar: [ ..., 'wproofreader' ]
        wproofreader: {
            serviceId: 'your-service-ID',
            srcUrl: 'https://svc.webspellchecker.net/spellcheck31/wscbundle/wscbundle.js'
        }
    } )

Refer to the official documentation for more details about the cloud setup and available configuration options.

# WProofreader Server

After signing up for a trial or paid version, you will receive access to the WebSpellChecker Server package to install on your own server.

You will need to add the following configuration to your editor:

import WProofreader from '@webspellchecker/wproofreader-ckeditor5/src/wproofreader';

ClassicEditor
    .create( editorElement, {
        plugins: [ ..., WProofreader ],
        toolbar: [ ..., 'wproofreader' ]
        wproofreader: {
            serviceProtocol: 'https',
            serviceHost: 'localhost',
            servicePort: '2880',
            servicePath: '/',
            srcUrl: 'https://host_name/virtual_directory/wscbundle/wscbundle.js'
        }
    } )

Refer to the official documentation for more details about the server setup and available configuration options.

# Configuration

WProofreader configuration is set inside the CKEditor 5 configuration in the wproofreader object. Refer to the WProofreader API for further information.

# Contribute

You can report issues and request features in the official WProofreader for CKEditor 5 repository.