Spelling, grammar and punctuation checking

WProofreader SDK is an AI-driven, multi-language text correction tool. It offers 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 dialog aggregating all mistakes and replacement suggestions in one place.

You can fine-tune WProofreader via the dedicated settings menu. Choose a primary language from a set of available ones. Create and manage additional custom 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 just a click.

After reading this guide, you may find additional interesting details and examples in the Spell and grammar check in CKEditor 5 blog post.

# Demo

Use the toolbar button to test the spell and grammar check feature in the editor below.

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 found, click the “Proofread in dialog” option in the toolbar dropdown. It will invoke a detached floating dialog, which is easy to navigate and perfect for dedicated proofreading sessions.

You can access the WProofreader settings from the toolbar, too. Set the primary language, create a spelling dictionary and tweak some additional proofreading settings.

# Multi-language support

The text part language feature lets the user set different languages to different portions of the content. The spell and grammar check feature offers full support for a multilingual content. If the WProofreader language is set to Auto Detect (or the auto language is set in the configuration), the feature will automatically recognize the language for a given sentence and suggest spelling and grammar corrections specifically for that language, as shown in the demo above.

# Check types

WProofreader checks texts for spelling, grammar, and punctuation mistakes. The auto detect feature facilitates correction of multilingual texts. Users do not have to manually switch languages to proofread combo docs. Handy spelling autocorrect validates user texts on the fly. Autocomplete suggestions for English make the proofreading process fast and smooth. The predictive text can be accepted with a right → arrow key.

# Supported languages and dictionaries

# Language support

The most popular languages used with WProofreader 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 tools 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.

# Accessibility

The WProofreader UI is designed and oriented toward comfort and ease of use. The proofreading floating dialog can be easily moved around, addressing the needs of left-handed editors and right-to-left language users. The clear, simple design is more readable for users with vision impairments. The dialog can also be navigated and operated with a keyboard, eliminating the need to use a mouse or another pointing device.

The spell and grammar check is compliant with WCAG 2.1 and Section 508 accessibility standards.

# Installation

WProofreader is delivered as a CKEditor 5 plugin, so it can be combined into an editor build just like 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( ... );

Please be aware that when you try to build CKEditor 5 from source with WProofreader included, you need to adjust the example webpack.config.js provided in the building from source guide. It needs to also allow including icons and styling from the WProofreader package. There are two way to do this.

The first configuration option is simpler:

    ///[...]
    module: {
        rules: [
            {
                test: /\.svg$/,

                use: [ 'raw-loader' ]
            },
            {
                test: /\.css$/,

                use: [
                    {
                        loader: 'style-loader',
                        ///[...]
                    }
                ]
            }
            ///[...]
        ]
    }

However, this approach can affect .svg and .css files included from outside of CKEdtor5-related packages.

Therefore, the best option is to use the other config solution. This one will only load .svg and .css files imported from CKEdtor5-related packages:

    ///[...]
    module: {
        rules: [
            {
                test: /ckeditor5([^\/\\]+)?[\/\\]theme[\/\\]icons[\/\\][^\/\\]+\.svg$/,

                use: [ 'raw-loader' ]
            },
            {
                test: /ckeditor5([^\/\\]+)?[\/\\]theme[/\\].+\.css$/,

                use: [
                    {
                        loader: 'style-loader',
                        ///[...]
                    }
                ]
            }
            ///[...]
        ]
    }

With this modification to the webpack.config.js, it is possible to build CKEditor 5 from source with WProofreader included.

At this step, it is required to provide a proper configuration. WProofreader can be used either as a cloud solution or hosted on your server (on-premise or in a private cloud).

# WProofreader Cloud

After signing up for a trial or paid version, you will receive your service ID on your email 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 On-premise

After signing up for a trial or paid version, you will receive access to the WebSpellChecker On-premise package to install it 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: '443',
            servicePath: 'virtual_directory/api/',
            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.