This guide outlines the main steps that you need to follow in order to integrate and configure WProofreader with a new auto-searching functionality. All the described steps are provided for the Server version of WProofreader.


WebSpellChecker Proofreader (WProofreader) is a new ultimate multi-language proofreading tool. It provides both instant and on-click proofreading modes in a new convenient UI. End users just need to hover on the marked words for instant correction suggestions or click the dialog icon in the bottom right corner to have the whole text proofread at once.

Supported Integrations

Here is list of most common uses cases of the WProofreader integration in your web app:

  • HTML editable controls such as <input> or <textarea> and elements with contenteditable attribute set to ‘true’ e.g. <div>, <iframe>;
  • Modern WYSIWYG editors such as CKEditor 4, CKEditor 5, TinyMCE, Froala Editor, Kendo UI, Quill, Redactor, Summernote, RadEditor - Telerik ASP.NET Editor, ProseMirror, Trix, etc.

The autoSearch feature will take care of detecting new editable fields on the page and enabling proofreading in them automatically on focus. No additional actions or plugins are required for enabling WProofreader in a specific WYSIWYG editor or HTML editable control. A single configuration applies to almost all editors and controls.


1. Initialize WProofreader with 'autoSearch'

There are two approaches for initializing WSC Proofreader in your web app: using the variable config or inline data attributes.

Option A. Initializing using Variable Config

1. Set Service Path

First of all, you need to add a script on your page and define a path to the WProofreader application.

<script type="text/javascript" src="http(s)://your_host_name/spellcheck/wscbundle/wscbundle.js"></script>

2. Define Configuration of WProofreader with 'autoSearch'

It will take you less than five minutes to enable the multi-language proofreading functionality in your web app. You just need to add the next simple script and define the required parameters. 

  • Enable autoSearch functionality. You need to define the autoSearch parameter in order activate auto-searching functionality.
  • Adjust the default parameters. Check a full list of API parameters to adjust default settings for your needs.
<script>
	window.WEBSPELLCHECKER_CONFIG = {
		autoSearch: true,
		enableGrammar: true,
        serviceProtocol: 'https',
        serviceHost: 'your_host_name',
        servicePort: '2880',
        servicePath: '/'
   };
</script>

Option B. Initializing using Inline Data Attributes

In general, the initialization of WProofreader using inline attributes is a good option if you want to have a single script with the base options. 

<script
	data-wsc-autosearch="true"
	data-wsc-lang="en_US"
	data-wsc-enableGrammar="true"
	data-wsc-serviceProtocol="https"
	data-wsc-serviceHost="your_host_name"
	data-wsc-servicePort="2880"
	data-wsc-servicePath="/"
	src="https://your_host_name/spellcheck/wscbundle/wscbundle.js">

In order to define an additional option as an inline data attribute, use 'date-wsc-option_name', e.g. 'data-wsc-lang'. You can find the full list of options available here.

There is a limitation which must be taken into account when using inline data attributes for the WProofreader options. As for now, only options which have boolean or string types can be used as data attributes. The options with array or number type are not supported (e.g. actionItems, suggestionsCount, moreSuggestionsCount).


In order to configure secure SSL connection between your application and AppServer, it is also required to perform the additional steps as described on the Setup SSL Connection with AppServer 5.0 page.

Check a demo page with WProofreader on our website.