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

# Demo

Click in the editor below to enable the spelling and grammar checking. Hover an underlined word to display the proofreader suggestions for any of the spelling and grammar mistakes found.

The proofreader badge in the bottom right-hand corner shows you the number of mistakes detected. It also gives you access to proofreader settings. If you want to see an overview of all spelling and grammar mistakes, click the “Proofread in dialog” icon in the badge.

Typos hapen. We striving to correct them. Hover on the marked words for instant correction suggestions or click the dialog icon in the bottom right corner to have the whole text proofread at once.

You can also paste your own text here to have its spelling and grammar checked.

# Supported languages

By default the spell checker supports 17 languages: American English, British English, Brazilian Portuguese, Canadian English, Canadian French, Danish, Dutch, Finnish, French, German, Greek, Italian, Norwegian Bokmal, Portuguese, Spanish, Swedish and Ukrainian. Grammar checking is available for 15 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 could 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:

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

ClassicEditor
    .create( editorElement, {
        plugins: [ ..., 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 ],
        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 ],
        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 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.