You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 14 Next »

This guide outlines the main steps that you need to follow in order to integrate and configure the WebSpellChecker (WSC) Dialog plugin for CKEditor 4. All the described steps are provided for the Cloud version of WSC.

Good to know:

  • WSC Dialog is an integrated spell and grammar checking solution in CKEditor 4. By default the WSC plugin for CKEditor is pointed to the Free WebSpellChecker Cloud Services. The free version with the banner ad and limited functionality is available for free for all CKEditor customers. 
  • The paid services allows the customers to get rid of the banner ad, lift the usage limitations and get the extra functionality and languages. 
  • To get started with the trial or paid version of WSC plugin for CKEditor 4, it is required to subscribe to the Cloud WebSpellChecker services. On the subscription, you will receive an email with your encrypted customer ID, an activation key, that is required for the WSC service activation.

1. Initialize CKEditor 4

Before integrating and configuring the WSC plugin, CKEditor should be properly configured in your web application. If you haven't done it yet, please refer to Example CKEditor Setups on the CKEditor documentation pages. 

2. Configure WSC Dialog Plugin

The next step is to define necessary WSC Dialog parameters and options in the CKEditor config.js file.

  • Specify you encrypted customer ID using the wsc_customerid parameter.
config.wsc_customerId = 'encrypted-customer-ID';
  • Define additional WSC parameters (e.g. change default language, adjust dialog view, etc.). 
config.wsc_lang = 'de_DE';
config.wsc_height = 800;
config.wsc_width = 800;


Here you can find a list of all available WSC Dialog parameters for CKEditor 4.0+ that can be used for the WSC configuration. Also, you may visit CKEDITOR configuration documentation.

This plugin reached its end-of-life date. The last usage date for the paid customers is December 2021. Read more in our blog post.

wsc_customLoaderScript

Description:

wsc_customLoaderScript parameter specifies a URL to the WSC Dialog script.

wsc_customLoaderScript is intended for use only with the Server version of WSC Dialog.

Parameter type:String
Default value:

None

Possible values:

Path to the wsc_fck2plugin.js script:

"/virtual_directory/lf/22/js/wsc_fck2plugin.js"

Path for the cloud version: https://svc.webspellchecker.net/spellcheck/lf/22/js/wsc_fck2plugin.js

Example:

config.wsc_customLoaderScript = "https://your_host_name/virtual_directory/lf/22/js/wsc_fck2plugin.js";

Back to the top...

wsc_customerId

Description:

wsc_customerId parameter sets a customer ID for Cloud WSC Dialog. It is required for migration from the free, ad-supported version to paid, ad-free version. 

wsc_customerId is intended for use only with the Cloud version of WSC Dialog.

Parameter type:String
Default value:

A free version of WSC plugin is shipped with already predefined encrypted customer ID value.

Possible values:encrypted-customer-id

Example:

config.wsc_customerId = 'encrypted-customer-id';

Back to the top...

wsc_lang

Description:

wsc_lang parameter sets a language short code of the default language that will be used for spell checking. 

Parameter type:String
Default value:

en_US (American English)

Possible values:

Example:

config.wsc_lang = 'de_DE';

Back to the top...

wsc_customDictionaryIds

Description:

wsc_customDictionaryIds parameter specifies a custom dictionary ID that will be linked with WSC Dialog.

Parameter type:String
Default value:

None

Possible values:

IDs of custom dictionaries separated with commas (' , ').

Example:

config.wsc_customDictionaryIds = '1,3001';

Back to the top...

wsc_userDictionaryName

Description:

wsc_userDictionaryName parameter predefines a specific user dictionary that will be used with SCAYT.

Parameter type:String
Default value:

None

Possible values:

Any name of a user dictionary.

Example:

config.wsc_userDictionaryName = 'user_dictionary_name';

Back to the top...

wsc_cmd

Description:

wsc_cmd parameter sets an active tab which should be shown on the dialog opening.

Parameter type:String
Default value:

spell

Possible values:
  • spell – spell checking tab;
  • thes – thesaurus tab;
  • grammar – grammar checking tab.

Example:

config.wsc_cmd  = 'thes';

Back to the top...

wsc_height

Description:

wsc_height parameter sets the height in pixels of WSC Dialog.

Parameter type:String
Default value:

Content-based

Possible values:Any height size in pixels.

Example:

config.wsc_height = 800;

Back to the top...

wsc_width

Description:

wsc_width parameter sets the width in pixels of WSC Dialog.

Parameter type:String
Default value:

580

Possible values:Any width size in pixels.

Example:

config.wsc_width = 800;

Back to the top...

wsc_top

Description:

wsc_top parameter sets a top margin value in pixels of WSC Dialog.

Parameter type:String
Default value:

Fixed position in the middle of the screen.

Possible values:Any top margin value in pixels.

Example:

config.wsc_top = 0;

Back to the top...

wsc_left

Description:

wsc_left parameter sets a left margin value in pixels of WSC Dialog.

Parameter type:String
Default value:

Fixed position in the middle of the screen.

Possible values:Any left margin value in pixels.

Example:

config.wsc_left = 0;

Back to the top...

Can be also useful:


Check a demo page with WSC plugin for CKEditor on our website.

  • After all changes are made, it is recommended to clean your browser cache. This is a recommended step, as some of the previous settings can be saved you in your browser cache.

3. Verify Operability

The simplest way to verify operability and correct work of the WSC plugin for CKEditor is to type any text with spelling and grammar mistake, then go to the ABC icon on the CKEditor toolbar and click Check Spelling. A new pop-up should be opened with spelling errors and grammar errors underlines in SpellChecker and Grammar tabs accordingly.

If you are migrating or configuring the Paid version of WSC Dialog for CKEditor, upon adding an encrypted customer ID (an activation key) of the paid subscription, the banner ad on the dialog should be removed.

Pic 3.1. The view of WSC Dialog plugin using the Free/Trial WebSpellChecker Cloud Services.

Pic 3.2. The view of WSC Dialog plugin using the Paid WebSpellChecker Cloud Services.



Still have a question?

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

Can be also useful: