# CKEditor 4

This guide covers how to add proofreading to CKEditor 4. It applies to both Cloud and self-hosted deployments.

CKEditor 4 reached its end of life in June 2023. CKSource offers an [Extended Support Model](https://ckeditor.com/ckeditor-4-support/) with security fixes under a commercial license. WebSpellChecker continues to support its proofreading products for CKEditor 4 for existing clients, but recommends [CKEditor 5](https://wproofreader.com/integrations/ckeditor5) for new projects.

[See live demo](https://demos.webspellchecker.com/wproofreader-ckeditor4.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.

### Choose your proofreading product

There are two proofreading products available for CKEditor 4: SCAYT (legacy) and WProofreader. You can use either one, but not both at the same time.

|                               | SCAYT (legacy)                                                              | WProofreader                                                                                                                               |
| ----------------------------- | --------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
| Status                        | Legacy, maintained for existing clients                                     | Actively developed                                                                                                                         |
| Toolbar button                | Yes, dedicated ABC button in CKEditor toolbar                               | No dedicated CKEditor 4 button (uses its own floating UI)                                                                                  |
| Suggestions UI                | Right-click context menu (uses CKEditor's native UI)                        | Badge in the bottom corner of the editor (similar to Grammarly), hover suggestions in as-you-type mode, and a separate proofreading dialog |
| Spell check                   | Yes                                                                         | Yes                                                                                                                                        |
| Grammar and punctuation check | Yes                                                                         | Yes                                                                                                                                        |
| Spelling autocorrect          | No                                                                          | Yes                                                                                                                                        |
| Text autocomplete             | No                                                                          | Yes                                                                                                                                        |
| AI writing assistant (AIWA)   | No                                                                          | Yes                                                                                                                                        |
| Custom dictionaries           | Yes                                                                         | Yes                                                                                                                                        |
| Customization options         | [SCAYT parameters](https://docs.wproofreader.com/integrations/legacy-scayt) | [Configuration reference](https://webspellchecker.com/docs/api/wscbundle/Options.html) (more options available)                            |
| Installation                  | Included by default in CKEditor 4 standard build                            | Requires adding the WProofreader script or npm SDK                                                                                         |

If you're starting a new integration, WProofreader is recommended. It offers more features and is actively developed. If you're already using SCAYT and don't need the additional features, you can continue using it.

### SCAYT plugin (legacy)

SCAYT is included by default in the CKEditor 4 standard build. The free version uses WebSpellChecker's free services and displays a banner ad. To remove the ad and unlock full functionality, you'll need a paid subscription.

For setup and configuration instructions, refer to the [SCAYT plugin for CKEditor 4](https://docs.wproofreader.com/integrations/legacy-scayt/scayt-plugin-for-ckeditor-4) guide.

[See SCAYT demo](https://webspellchecker.com/wsc-scayt-ckeditor4/)

### WProofreader integration

WProofreader doesn't have a dedicated plugin for CKEditor 4 but integrates through the script-based or NPM SDK methods. It provides its own UI with a badge in the bottom corner of the editor (similar to Grammarly) that shows the total number of issues found, hover suggestions as you type, and a proofreading dialog for reviewing all issues at once.

#### Recommended CKEditor 4 options

When using WProofreader with CKEditor 4, these config options can help match the look and scope:

```js
theme: 'gray',  // adjusts WProofreader's color theme to look more native to CKEditor 4
enableAutoSearchIn: ['.cke_wysiwyg_frame'],  // limits WProofreader to CKEditor 4 areas only
```

#### Script-based integration

The simplest approach is `autoSearch`, which detects CKEditor 4'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.

**Using init() for immediate activation**

If you want proofreading to start on editor load without waiting for focus, use `init()` inside CKEditor's `instanceReady` event:

```html
<script>
  window.WEBSPELLCHECKER_CONFIG = {
    autoSearch: true,
    autoDestroy: true,
    serviceId: 'your-service-ID'
  };
</script>

<script src="https://svc.webspellchecker.net/spellcheck31/wscbundle/wscbundle.js"></script>

<div id="ckeditor4-editor">
  <p>Your text here.</p>
</div>

<script>
  CKEDITOR.disableAutoInline = true;

  CKEDITOR.on('instanceReady', function(event) {
    var editor = event.editor;
    WEBSPELLCHECKER.init({
      container: editor.window.getFrame()
        ? editor.window.getFrame().$
        : editor.element.$
    });
  });

  CKEDITOR.replace('ckeditor4-editor', {});
</script>
```

The `container` value depends on CKEditor 4's rendering mode. In iframe mode (default), it uses `editor.window.getFrame().$`. In inline mode, it falls back to `editor.element.$`. The ternary expression handles both cases automatically.

Setting `autoSearch: true` and `autoDestroy: true` alongside `init()` ensures WProofreader recovers correctly when CKEditor switches between editing modes.

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

```html
<script>
  window.WEBSPELLCHECKER_CONFIG = {
    autoSearch: true,
    autoDestroy: true,
    serviceProtocol: 'https',
    serviceHost: 'your_host_name',
    servicePort: '443',
    servicePath: 'wscservice/api'
  };
</script>

<script src="https://your_host_name/wscservice/wscbundle/wscbundle.js"></script>
```

#### NPM SDK integration

The WProofreader SDK npm package is a universal integration method that works with any editor, including CKEditor 4. It's a good fit for JavaScript framework projects (React, Angular, Vue) or when you use multiple editors and want a single proofreading dependency.

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()`.

### Remove other spell checkers

If you're switching from SCAYT to WProofreader, remove the SCAYT plugin to avoid conflicts. Add the `removePlugins` parameter to your CKEditor `config.js` file:

```js
config.removePlugins = 'scayt';
```

If your CKEditor 4 build also includes the WSC Dialog plugin, remove it as well. The WSC Dialog plugin [reached its end of life](https://webspellchecker.com/blog/2020/12/02/end-of-life-for-spell-checker-dialog-plugin-for-ckeditor-4/) in December 2021.

```js
config.removePlugins = 'scayt,wsc';
```

### What's next

After integration, you can customize your proofreading setup further:

* [Configuration reference](https://webspellchecker.com/docs/api/wscbundle/Options.html) for the full list of WProofreader options (default language, UI localization, check types, custom dictionaries, and more).
* [SCAYT parameters for CKEditor 4](https://docs.wproofreader.com/integrations/legacy-scayt/scayt-parameters-for-ckeditor-4) for SCAYT-specific configuration.
* [Features overview](https://wproofreader.com/features) to explore custom dictionaries, style guide rules, AI writing assistant, and other capabilities.
* [Demos](https://demos.webspellchecker.com/) to see working examples with CKEditor 4 and other editors.

### FAQ

#### Can I use SCAYT and WProofreader at the same time?

It's technically possible, but not recommended. Running both at the same time will cause confusion as users will see duplicate underlines for the same errors. If you're switching to WProofreader, remove the SCAYT plugin first.

#### Should I migrate from SCAYT to WProofreader?

If you need features like spelling autocorrect, text autocomplete, AI writing assistant, or style guide rules, WProofreader is the better choice. If your current SCAYT setup meets your needs, you can continue using it.

#### Is CKEditor 4 still supported?

CKEditor 4 reached its end of life in June 2023. CKSource offers an Extended Support Model with security fixes under a commercial license. For new projects, consider [CKEditor 5](https://wproofreader.com/integrations/ckeditor5), which has a dedicated WProofreader plugin.

#### How do I migrate from CKEditor 4 to CKEditor 5?

This is a CKEditor migration, not a WebSpellChecker one. Refer to CKEditor's [migration guide](https://ckeditor.com/docs/ckeditor5/latest/updating/ckeditor4/migration-from-ckeditor-4.html). Once you've migrated to CKEditor 5, follow the [CKEditor 5 integration guide](https://docs.wproofreader.com/integrations/rich-text-editors/ckeditor-5) for WProofreader, which uses a dedicated plugin with a native toolbar button. Note that CKEditor 5 requires a separate license from CKSource.


---

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