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.
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 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.HTML integration WYSIWYG editors
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
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. Add Config with Options
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. 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
Step 2. Adjust Default Options
You can adjust the default options for your needs. Here 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.