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.


WProofreader is multilingual proofreading tool for web applications. It enables grammar and spell check combining spelling and grammar suggestions while you type or work with your text in a dedicated 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 control. A single configuration applies to almost all editors and controls. Here is the list of WProofreader supported integrations

Supported Integrations

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.


HTML integrationWYSIWYG editors

HTML editable controls:

<input> disabled by default

<textarea> 


Elements with contenteditable attribute set to ‘true’:

<div>

<iframe>

* The dialog mode of WProofreader is not supported with real-time collaboration features or multi-root editor modes of CKEditor 5. 

** Integration with Slate.js and Draft won't work properly with IE11.

WProofreader also has a plugin for WordPress 4.x and WordPress 5.x. For more details, check the official repository of WProofreader plugin for WordPress.

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

Add the wscbundle.js script on your web page.

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

2. Define Configuration of WProofreader with 'autoSearch'

Define the required options in WEBSPELLCHECKER_CONFIG:

WEBSPELLCHECKER_CONFIG can be added to any location on a web page before or after the wscbundle.js script. However, if you add wscbundle.js asynchronously, this CONFIG must be added before the script.

  • 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

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


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.