CKEditor 5

This guide covers how to add WProofreader spelling, grammar, and style checking to CKEditor 5. It applies to both cloud and self-hosted deployments.

See live demo

Prerequisites

You'll need an active WProofreader subscription or trial. Sign up for a free trial or choose a plan. For the cloud version, you'll need a Service ID. You can find it on the Credentials page in the admin panel after signing up. For self-hosted, you'll need the endpoint of your WProofreader application (protocol, host, port, and path) to specify in the configuration parameters.

The WProofreader plugin for CKEditor 5 is available as an npm package (@webspellchecker/wproofreader-ckeditor5) and the source is on GitHub.

Supported editor modes

The WProofreader plugin supports the following CKEditor 5 editor types and modes:

Editor mode	Supported
Classic editor	Yes
Inline editor	Yes
Balloon editor	Yes
Document editor	Yes
Multi-root editor	Yes, with language and settings synchronization between instances
Real-time collaborative editing	Yes, with sync support
Restricted editing mode	Yes
Track changes editing mode	Yes

Choose your integration method

The WProofreader plugin for CKEditor 5 adds native integration including a toolbar button, a CKEditor 5 color theme, and support for collaborative editing and multi-root setups. This is the recommended approach for most projects.

Method	Best for
CKEditor 5 plugin via npm	Most CKEditor 5 projects using a build process. Installs as a native plugin with a toolbar button.
CKEditor 5 plugin via CDN (browser builds)	Build-free setups using CKEditor 5 loaded from CDN with ES module imports.
CKEditor 5 plugin via CDN (UMD builds)	Build-free setups using CKEditor 5 loaded from CDN with UMD/global scripts.
npm SDK	Projects using multiple editors that want a single shared WProofreader dependency. Works with CKEditor 5 but doesn't include the toolbar button or collaborative editing sync.
Script-based (independent)	Quick setup without any plugin. WProofreader detects the editor's editable area automatically. No toolbar button.

CKEditor 5 plugin via npm

Installation

Install the WProofreader plugin and CKEditor 5:

npm install @webspellchecker/wproofreader-ckeditor5
npm install ckeditor5

Configuration

Import CKEditor 5 and the WProofreader plugin into your project:

import { ClassicEditor, Essentials, Bold, Italic, List, Paragraph, Heading } from 'ckeditor5';
import 'ckeditor5/ckeditor5.css';
import { WProofreader } from '@webspellchecker/wproofreader-ckeditor5/src/wproofreader';

Add WProofreader to the plugins array, include 'wproofreader' in the toolbar, and configure the wproofreader field.

For the cloud version:

ClassicEditor
  .create(document.getElementById('editorElement'), {
    licenseKey: '<YOUR_LICENSE_KEY>', // required from CKEditor 5 v44.0.0
    plugins: [Essentials, Paragraph, Heading, List, Bold, Italic, WProofreader],
    toolbar: ['heading', '|', 'bold', 'italic', 'bulletedList', 'numberedList', '|', 'wproofreader', '|', 'undo', 'redo'],
    wproofreader: {
      serviceId: 'your-service-ID',
      srcUrl: 'https://svc.webspellchecker.net/spellcheck31/wscbundle/wscbundle.js'
    }
  });

For self-hosted deployments:

ClassicEditor
  .create(document.getElementById('editorElement'), {
    licenseKey: '<YOUR_LICENSE_KEY>', // required from CKEditor 5 v44.0.0
    plugins: [Essentials, Paragraph, Heading, List, Bold, Italic, WProofreader],
    toolbar: ['heading', '|', 'bold', 'italic', 'bulletedList', 'numberedList', '|', 'wproofreader', '|', 'undo', 'redo'],
    wproofreader: {
      serviceProtocol: 'https',
      serviceHost: 'your_host_name',
      servicePort: '443',
      servicePath: 'wscservice/api',
      srcUrl: 'https://your_host_name/wscservice/wscbundle/wscbundle.js'
    }
  });

Pass the WProofreader configuration inside the wproofreader field. For a full list of available options, refer to the Configuration reference.

The plugin includes TypeScript support. The package contains a type definition file (.d.ts) that enables configuration of WProofreader options in TypeScript projects.

CKEditor 5 plugin via CDN (browser builds)

Use this method if you're loading CKEditor 5 from CDN using ES module imports and an import map, without a build process.

Add the following styles and import map to your HTML page:

<link rel="stylesheet" href="https://cdn.ckeditor.com/ckeditor5/43.3.1/ckeditor5.css" />

<script type="importmap">
{
  "imports": {
    "ckeditor5": "https://cdn.ckeditor.com/ckeditor5/43.3.1/ckeditor5.js",
    "ckeditor5/": "https://cdn.ckeditor.com/ckeditor5/43.3.1/",
    "@webspellchecker/wproofreader-ckeditor5/src/wproofreader": "https://cdn.jsdelivr.net/npm/@webspellchecker/wproofreader-ckeditor5@3.1.3/dist/browser/index.js",
    "@webspellchecker/wproofreader-ckeditor5/src/wproofreader/": "https://cdn.jsdelivr.net/npm/@webspellchecker/wproofreader-ckeditor5@3.1.3/dist/browser/"
  }
}
</script>

Then initialize the editor. For the cloud version:

<div id="editorElement">Hello, World!</div>

<script type="module">
  import { ClassicEditor, Essentials, Bold, Italic, List, Paragraph, Heading } from 'ckeditor5';
  import { WProofreader } from '@webspellchecker/wproofreader-ckeditor5/src/wproofreader';

  ClassicEditor
    .create(document.getElementById('editorElement'), {
      plugins: [Essentials, Paragraph, Heading, List, Bold, Italic, WProofreader],
      toolbar: ['heading', '|', 'bold', 'italic', 'bulletedList', 'numberedList', '|', 'wproofreader', '|', 'undo', 'redo'],
      wproofreader: {
        serviceId: 'your-service-ID',
        srcUrl: 'https://svc.webspellchecker.net/spellcheck31/wscbundle/wscbundle.js'
      }
    });
</script>

For self-hosted deployments, replace the wproofreader config block with your server connection parameters:

wproofreader: {
  serviceProtocol: 'https',
  serviceHost: 'your_host_name',
  servicePort: '443',
  servicePath: 'wscservice/api',
  srcUrl: 'https://your_host_name/wscservice/wscbundle/wscbundle.js'
}

CKEditor 5 plugin via CDN (UMD builds)

Use this method if you're loading CKEditor 5 from CDN using the UMD global script (not ES modules).

Add the following styles and scripts to your HTML page:

<link rel="stylesheet" href="https://cdn.ckeditor.com/ckeditor5/43.3.1/ckeditor5.css" />
<script src="https://cdn.ckeditor.com/ckeditor5/43.3.1/ckeditor5.umd.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@webspellchecker/wproofreader-ckeditor5@3.1.3/dist/browser/index.umd.js"></script>

Then initialize the editor. For the cloud version:

<div id="editorElement">Hello, World!</div>

<script>
  const { ClassicEditor, Essentials, Bold, Italic, List, Paragraph, Heading } = CKEDITOR;
  const { WProofreader } = window['@webspellchecker/wproofreader-ckeditor5'];

  ClassicEditor
    .create(document.getElementById('editorElement'), {
      plugins: [Essentials, Paragraph, Heading, List, Bold, Italic, WProofreader],
      toolbar: ['heading', '|', 'bold', 'italic', 'bulletedList', 'numberedList', '|', 'wproofreader', '|', 'undo', 'redo'],
      wproofreader: {
        serviceId: 'your-service-ID',
        srcUrl: 'https://svc.webspellchecker.net/spellcheck31/wscbundle/wscbundle.js'
      }
    });
</script>

For self-hosted deployments, replace the wproofreader config block with your server connection parameters:

wproofreader: {
  serviceProtocol: 'https',
  serviceHost: 'your_host_name',
  servicePort: '443',
  servicePath: 'wscservice/api',
  srcUrl: 'https://your_host_name/wscservice/wscbundle/wscbundle.js'
}

If you want to use a newer version of CKEditor 5, refer to the CKEditor 5 license key and activation guide.

npm SDK integration

The WProofreader SDK npm package is a universal integration method that works with any editor, including CKEditor 5. It's a good fit for projects that use multiple editors and want a single shared WProofreader dependency. It doesn't include the CKEditor 5 toolbar button or the collaborative editing sync that the dedicated plugin provides.

For setup instructions, refer to the Initialize using npm SDK guide. It covers installation, configuration, and usage with autoSearch and init().

Script-based integration

If you don't use a build process and don't need a toolbar button, you can integrate WProofreader independently using autoSearch. This detects CKEditor 5's editable area automatically when a user focuses on it. For setup instructions, refer to the Initialize using autoSearch guide.

If you want proofreading to start on editor load without waiting for focus, use init() inside CKEditor 5's .then() callback after the editor is created. For full setup instructions, refer to the Initialize using init() guide. When using this method with CKEditor 5, iterate over the editor's DOM roots to pass the correct container:

ClassicEditor
  .create(document.getElementById('editorElement'), {
    plugins: [Essentials, Paragraph, Heading, List, Bold, Italic],
    toolbar: ['heading', '|', 'bold', 'italic', 'bulletedList', 'numberedList', '|', 'undo', 'redo']
  })
  .then(editor => {
    const roots = editor.editing.view.domRoots.values();
    for (const root of roots) {
      WEBSPELLCHECKER.init({
        container: root
      });
    }
  });

For self-hosted deployments, replace serviceId with the server connection parameters and update the script src to point to your server:

<script>
window.WEBSPELLCHECKER_CONFIG = {
  autoSearch: true,
  serviceProtocol: 'https',
  serviceHost: 'your_host_name',
  servicePort: '443',
  servicePath: 'wscservice/api'
};
</script>
<script src="https://your_host_name/wscservice/wscbundle/wscbundle.js"></script>

What's next

After integration, you can customize WProofreader further:

• Configuration reference for the full list of options (default language, UI localization, check types, custom dictionaries, and more).

• Features overview to explore custom dictionaries, style guide rules, AI writing assistant (AIWA), and other capabilities.

• Demos to see working examples with CKEditor 5 and other editors.

• CKEditor 5 spelling and grammar checking → in the CKEditor 5 documentation.

FAQ

Which integration method should I use?

For most projects using a build process, use the npm plugin. It gives you a native toolbar button, a CKEditor 5 color theme, and full support for collaborative editing and multi-root setups. If you're loading CKEditor 5 from CDN without a build step, choose the browser builds or UMD method depending on whether you use ES module imports or global scripts. The npm SDK works if you have multiple editors sharing one WProofreader dependency, but you'll lose the toolbar button and collaborative editing sync. The script-based method works for any setup but also doesn't add a toolbar button.

Does the plugin support real-time collaborative editing?

Yes. The WProofreader plugin for CKEditor 5 includes sync support for real-time collaborative editing and language and settings synchronization across instances in multi-root setups.

Does the plugin support TypeScript?

Yes, starting from version 3.1.0. The package includes a type definition file (.d.ts) that enables configuration of WProofreader options in TypeScript projects.

What's the difference between the plugin and the script-based integration?

The plugin integrates WProofreader natively into the CKEditor 5 build with a toolbar button, a matching color theme, and proper support for collaborative editing and multi-root editors. The script-based integration is simpler and works independently of the editor's plugin system, but it doesn't add a toolbar button and doesn't include the collaborative editing sync logic.

Is WProofreader the official spell check solution for CKEditor 5?

Yes. CKEditor 5 doesn't include a built-in spell checker. WProofreader is the solution CKEditor promotes and links to directly from its own documentation and spellchecker page. The plugin is built specifically for CKEditor 5 and integrates natively into the editor's plugin system, toolbar, and theme.