CKEditor 4

WProofreader add-on for rich text editors enables grammar and spell check, combining spelling and grammar suggestions while you type or work with your text in a floating dialog.

Its auto-searching feature enables detecting new editable fields on the page and proofreading the text they contain automatically on hover selection. No additional actions or plugins are required for enabling WProofreader in a specific WYSIWYG editor or HTML editable element. A single configuration applies to almost all editors and controls. Here is the list of WProofreader supported integrations.

This guide outlines the main steps that you need to follow for initializing WProofreader in CKEditor 4.

1. Obtain service ID

Sign up for the trial version to get started with WProofreader Cloud. Once you have subscribed, you will receive an email with your service ID, an activation key, required for the WProofreader service activation.

If you already have one, you can skip this step.

2. Initialize CKEditor 4

Before integrating and configuring WProofreader, make sure CKEditor 4 is properly configured in your web application. To initialize CKEditor 4, follow the steps described in CKEditor 4 Quick Start Guide.

3. Initialize WProofreader

Choose one of the options below how to enable spelling and grammar checking functionality of WProofreader in CKEditor 4.

Option A. Using autoSearch (the easiest)

When using this method, you need a CONFIG and a wscbundle.js script. After setting up the autoSearch, WProofreader will be enabled as soon as the editable container with CKEditor is in focus. Follow the steps described in the Get Started with WProofreader Cloud (autoSearch) or below.

<script>
    window.WEBSPELLCHECKER_CONFIG = {
        autoSearch: true,
	       lang: 'auto', // enable language auto-detection option
	       theme: 'gray', // adjust color theme of WProofreader to look more native to CKEditor 4
	       enableAutoSearchIn: ['.cke_wysiwyg_frame'], // limit WProofreader work only to CKEditor 4. They hide the original element and create an iframe element with cke_wysiwyg_frame class.
               <!--Use the activation key for the Cloud-based version
               serviceId: 'your-service-ID'
               -->
               <!-- Use four server parameters for the On-premise version
               serviceProtocol:'https', 
               serviceHost:'your_host_name',
               servicePort:'your_port_number',
               servicePath:'virtual_directory/api' //by default the virtual directory name is wscservice
               -->
               ...
   };
</script>
<!-- Use this path for the On-premise version
<script type="text/javascript" src="http(s)://host_name/wscservice/wscbundle/wscbundle.js"></script>
-->
<!-- Use this path for the Cloud-based version
<script type="text/javascript" src="https://svc.webspellchecker.net/spellcheck31/wscbundle/wscbundle.js"></script>
-->

Option B. Using the init method

4. Activate service

Make sure you have specified the options, which are instructing where spelling and grammar checking requests will be processed.

To activate the Cloud version of WProofreader, you are required to add serviceId option to the CONFIG with your activation key and specify the correct path to the wscbundle.js file on our Cloud.

<script>
    window.WEBSPELLCHECKER_CONFIG = {
        ...
        serviceId: 'your-service-ID'
        ...
        };
</script>
<script type="text/javascript" src="https://svc.webspellchecker.net/spellcheck31/wscbundle/wscbundle.js"></script>

Meanwhile to activate the on-premise version of WProofreader you have to specify the server parameters and appropriate path to wscbundle.js file on your server.

<script>
    window.WEBSPELLCHECKER_CONFIG = {
        ...
        serviceProtocol:'https', 
        serviceHost:'your_host_name',
        servicePort:'your_port_number',
        servicePath:'virtual_directory/api' //by default the virtual directory name is wscservice
        ...
    };
</script>
<script type="text/javascript" src="http(s)://host_name/wscservice/wscbundle/wscbundle.js"></script>

5. Remove old plugins

Remove SCAYT and WSC Dialog plugins for CKEditor 4 which are integrated by default to avoid any possible issues. It can be done by adding the removePlugins parameter to CKEditor config.js file:

config.removePlugins ='scayt,wsc';

6. Further actions

After you have initialized WProofreader in CKEditor 4, you can customize WProofreader options, its user interface, and behavior using WProofreader customization options. More options and methods for advanced customization are available in API docs.

You can see the demo of CKEditor 4 integration on our website.

Still have a question?

Please feel free to contact our technical team if you are having any difficulties with the configuration.