Initializing WProofreader in CKEditor 4

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.

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

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

enableAutoSearchIn: ['.cke_wysiwyg_frame'],

Option B. Using init() method

When using this method, WProofreader will be started on the CKEditor 4 load.

Initializing WProofreader using init() in CKEditor 4

<!-- Include the WEBSPELLCHECKER_CONFIG variable. -->
<script>
    window.WEBSPELLCHECKER_CONFIG = {
		autoSearch: true,
		autoDestroy: true,
		...	
    };
</script>

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

<div id="ckeditor4-editor">
    <p>These are an examples of a sentences with two mispelled words and grammar problems. Just type text with misspelling to see how it works.</p>
</div>

<script>
	CKEDITOR.disableAutoInline = true;

	CKEDITOR.on('instanceReady', function(event) {
		var editor = event.editor;

    	WEBSPELLCHECKER.init({
			//catch both iframe and inline modes 
        	container: editor.window.getFrame() ? editor.window.getFrame().$ : editor.element.$
		});
	});
	
	CKEDITOR.replace('ckeditor4-editor', {});
</script>

4.  Activate service

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.

serviceId: 'your-service-ID'

Update the path to WProofreader wscbundle.js file in case of the Cloud version as follows:

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

5. Remove old plugins

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. You can see the demo of CKEditor 4 integration on our web site.