# 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](https://demos.webspellchecker.com/wproofreader-ckeditor5.html) ### Prerequisites You'll need an active WProofreader subscription or trial. [Sign up for a free trial or choose a plan](https://wproofreader.com/sdk#pricing). For the cloud version, you'll need a Service ID. You can find it on the [Credentials](https://app.wproofreader.com/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. {% hint style="info" %} The WProofreader plugin for CKEditor 5 is available as an npm package ([@webspellchecker/wproofreader-ckeditor5](https://www.npmjs.com/package/@webspellchecker/wproofreader-ckeditor5)) and the source is on [GitHub](https://github.com/WebSpellChecker/wproofreader-ckeditor5). {% endhint %} ### 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: ```js 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: ```js ClassicEditor .create(document.getElementById('editorElement'), { licenseKey: '', // 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: ```js ClassicEditor .create(document.getElementById('editorElement'), { licenseKey: '', // 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](https://webspellchecker.com/docs/api/wscbundle/Options.html). 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: ```html ``` Then initialize the editor. For the cloud version: ```html
Hello, World!
``` For self-hosted deployments, replace the `wproofreader` config block with your server connection parameters: ```js 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: ```html ``` Then initialize the editor. For the cloud version: ```html
Hello, World!
``` For self-hosted deployments, replace the `wproofreader` config block with your server connection parameters: ```js 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](https://ckeditor.com/docs/ckeditor5/latest/getting-started/licensing/license-key-and-activation.html). ### 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](/integrations/initialization/initialization-options/initialize-using-npm-sdk.md) 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](/integrations/initialization/initialization-options.md#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()](/integrations/initialization/initialization-options.md#initialize-using-init-method) guide. When using this method with CKEditor 5, iterate over the editor's DOM roots to pass the correct container: ```js 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: ```html ``` ### What's next After integration, you can customize WProofreader further: * [Configuration reference](https://webspellchecker.com/docs/api/wscbundle/Options.html) for the full list of options (default language, UI localization, check types, custom dictionaries, and more). * [Features](/features/spell-and-grammar-check.md) overview to explore custom dictionaries, style guide rules, AI writing assistant (AIWA), and other capabilities. * [Demos](https://demos.webspellchecker.com/) to see working examples with CKEditor 5 and other editors. * [CKEditor 5 spelling and grammar checking →](https://ckeditor.com/docs/ckeditor5/latest/features/spelling-and-grammar-checking.html) 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](https://ckeditor.com/spellchecker/). The plugin is built specifically for CKEditor 5 and integrates natively into the editor's plugin system, toolbar, and theme. --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.wproofreader.com/integrations/rich-text-editors/ckeditor-5.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.