> For the complete documentation index, see [llms.txt](https://docs.wproofreader.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.wproofreader.com/v6.10.0.0/integrations/rich-text-editors/ckeditor-5.md).

# CKEditor 5

**WProofreader plugin for CKEditor 5** inherits all the functionality of the WProofreader component with slight adaptation to the view and features of the editor. Right now the plugin is just a “wrapper” for the classic WProofreader. Thus, WProofreader will be more native to CKEditor 5 build procedure. 

The main differences between the plugin and the classic WProofreader are:

* part of the build and configuration of CKEditor 5;
* tailored color theme for CKEditor 5 based on previously discussed styles;
* implemented sync in the case of real-time collaboration features and multi-root plugin;
* better work of WProofreader as you type mode in the case of multi-root plugin (languages and settings synchronization between instances).

For more details, please refer to the [official repo ](https://www.npmjs.com/package/@webspellchecker/wproofreader-ckeditor5)or [NPM package](https://github.com/WebSpellChecker/wproofreader-ckeditor5) of the WProofreader plugin for CKEditor 5.

If your preference is to use the plugin instead of the classic WProofreader initialization, please follow the steps below.

1\. Clone [CKEditor 5 Classic editor](https://ckeditor.com/docs/ckeditor5/latest/builds/guides/quick-start.html#classic-editor):

```javascript
git clone -b stable git@github.com:ckeditor/ckeditor5-build-classic.git
```

2\. Go to the editor folder:

```javascript
cd ckeditor5-build-classic
```

3\. Install all the required dependencies:

```javascript
npm  install
```

4\. Install the WProofreader plugin:

```javascript
npm  install @webspellchecker/wproofreader-ckeditor5 --save-dev
```

5\. Open **/src/ckeditor.js** file.

6\. Import the WProofreader plugin:

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

{% hint style="info" %}
To add WProofreader in a bundle with CKEditor 5 with **TypeScript** you need to use the following:

\
`//@ts-ignore` 

`import WProofreader from '@webspellchecker/wproofreader-ckeditor5/src/wproofreader';`
{% endhint %}

7\. Add WProofreader plugin to **ClassicEditor.builtinPlugins**:

```javascript
ClassicEditor.builtinPlugins = [
    ...,
    WProofreader
];
```

8\. Add WProofreader toolbar button to **ClassicEditor.defaultConfig**:

The toolbar button is available starting from [version 2.0.0 of the plugin](https://github.com/WebSpellChecker/wproofreader-ckeditor5/blob/master/CHANGELOG.md) and the general [WebSpellChecker package version 5.8.0](https://webspellchecker.com/release-notes/v5-8-0/).

```
ClassicEditor.defaultConfig = {
    ...,
    toolbar: {
        items: [
            ...,
            'wproofreader'
        ]
    }
}
```

9\. Add the **wproofreader** field and its options to **ClassicEditor.defaultConfig**:

In the case of the Cloud version, **serviceId** and **srcUrl** are mandatory options.

```javascript
ClassicEditor.defaultConfig = {
    ...,
    wproofreader: {
		lang: 'en_US', // set the default language
                serviceId: 'your-service-ID', // the activation key for the Cloud-based version only
                srcUrl: 'https://svc.webspellchecker.net/spellcheck31/wscbundle/wscbundle.js'
    }
}
```

In the case of the on-premise version, you need to clearly define a path to the WebSpellChecker/WProofreader server:

```javascript
ClassicEditor.defaultConfig = {
    ...,
    wproofreader: {
		lang: 'en_US', // set the default language
                serviceProtocol: 'https',
		serviceHost: 'your_host_name',
		servicePort: '443',
		servicePath: 'virtual_directory/api',
                srcUrl: 'https://your_host_name/virtual_directory/wscbundle/wscbundle.js'
    }
}
```

The full list of configuration options for WProofreader is available in [API docs](/v6.10.0.0/api-reference/overview.md).

10\. Rebuild the bundle:

```javascript
npm run build
```

That's it. Now you should be able to use the spelling and grammar checking functionality of WProofreader with CKEditor 5.

Try it out on the default sample page: **/sample/index.html**.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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/v6.10.0.0/integrations/rich-text-editors/ckeditor-5.md?ask=<question>
```

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.