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 with security fixes under a commercial license. WebSpellChecker continues to support its proofreading products for CKEditor 4 for existing clients, but recommends CKEditor 5 for new projects.

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.

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	Configuration reference (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 guide.

See SCAYT demo

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:

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 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:

<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:

<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 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:

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 in December 2021.

config.removePlugins = 'scayt,wsc';

What's next

After integration, you can customize your proofreading setup further:

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

• SCAYT parameters for CKEditor 4 for SCAYT-specific configuration.

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

• Demos 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, 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. Once you've migrated to CKEditor 5, follow the CKEditor 5 integration guide for WProofreader, which uses a dedicated plugin with a native toolbar button. Note that CKEditor 5 requires a separate license from CKSource.