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


WebSpellChecker Proofreader (WProofreader) is a new multi-language proofreading tool for web apps. 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 use 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 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 control. A single configuration applies to almost all editors and controls.

Step 1. Initialize WProofreader

There are two approaches for initializing WProofreader in your web app: using the config variable or inline data attributes. Their description follows.

Option A. Initializing using Config Variable

1. Add WProofreader Script

First of all, you need to add a script on your web page.

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

2. Add Config with Options

Define the required options in WEBSPELLCHECKER_CONFIG:

  • Enable autoSearch functionality using the autoSearch parameter.
  • Specify serviceProtocolserviceHostservicePort and servicePath to access the service.

To configure secure SSL connection between your application and AppServer, follow the steps described on the Setup SSL Connection with AppServer 5.0 page.

<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


 Click here to expand a sample of WProofreader Initializing using Inline Data Attributes...

In general, initialization of WProofreader using inline attributes is a good option if you want to have a single script with the base options. 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  here.

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

Consider the following limitation 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).

Step 2. Adjust Default Options

You can adjust the default options for your needsHere is a full list of WProofreader API options and their possible values.

You can check the demos of WProofreader integrations with a various rich text editors on our website.