WProofreader SDK JavaScript

WProofreader SDK empowers your web applications with real-time multilingual spelling, grammar, and style checks. The SDK integrates seamlessly with rich text editors and text fields across various platforms, including those developed using popular JavaScript frameworks like Angular, React, and Vue.js. It offers users instant correction suggestions as they type or within a dedicated dialog.

Starting from version 1.1.0, WProofreader SDK JavaScript offers basic TypeScript support. The package includes the type definition file (.d.ts) for the WProofreader core methods and additional methods for the NPM package itself, covering initialization, configuration, and instance management. For integration of WProofreader SDK using TypeScript, refer to the Angular example.

Visit the WProofreader SDK repository or the official web page for more detailed information.

Find below the instructions that will guide you in easily integrating this functionality into your applications.

This repository also offers examples of WProofreader SDK integrated with rich text editors such as CKEditor 4, TinyMCE, Froala, and Quill in frameworks like Vue.js, React, and Angular. Browse the examples directory and see each README for setup details.

Installation

To add WProofreader SDK to your project, install the npm module using the following command.

``
npm install @webspellchecker/wproofreader-sdk-js
`

Initialization

1. Import WProofreader SDK:

`js
import WProofreaderSDK from '@webspellchecker/wproofreader-sdk-js';
`

2. Define global configuration. Regardless of your chosen initialization method, you'll need to configure the SDK globally. Use the configure method to set general options. Detailed descriptions of all available customization options can be found in the documentation.

Please note that the configure method needs to be called in the file that initializes the application.

`js
WProofreaderSDK.configure({
autoSearch: true,
lang: 'en_US' // Sets the default language. If not specified, auto-defined language will be used.

// Additional options here, e.g. the on-premise endpoint or cloud service activation key
});
`

3. Choose the initialization method. After setting general options, proceed to initialize the SDK using one of the methods below.

#### Option A: Using autoSearch option

Automatically enable WProofreader when an editable container gains focus. Add autoSearch: true to your configure method if you haven't already.

`js
WProofreaderSDK.configure({
autoSearch: true,
lang: 'en_US'
// Additional options here
});
`

#### Option B: Using data-wsc-autocreate data attribute

Add the data-wsc-autocreate="true" attribute to your editable container (e.g. textarea) to initialize WProofreader automatically with the page load (no need to set the focus). This must be applied to static elements that are part of the initial HTML markup.

`html
Some text.
`

It’s recommended to use this initialization method in a bundle with the autoSearch option if the page will be dynamically modified.

#### Option С: Using init method

Use init method to initialize WProofreader in a container. You can specify the other configuration options for the local initialization if needed. Or skip using configure method all together and set all the options directly in the init method.

`js
WProofreaderSDK.init({
container: document.getElementById('container')
// Additional options here
});
`

It’s recommended to use this initialization method in a bundle with the autoSearch option if the page will be dynamically modified.

4. Version-specific configuration. Depending on whether you are using WProofreader as the cloud service or opt for on-premise deployment, further configuration is necessary.

#### For the cloud-based version:

Add serviceId option with your activation key that you received during registration. It’s a mandatory option for activating and using the service.

`js
WProofreaderSDK.configure({
// Main options here
serviceId: 'your-service-ID'// required for the Cloud version only
});
`

#### For the server version:

Specify the backend endpoint hosted on your infrastructure using corresponding options as shown below. This version does not require the serviceId option.

`js
WProofreaderSDK.configure({
// Main options here
serviceProtocol: 'https',
serviceHost: 'localhost',
servicePort: '443',
servicePath: 'virtual_directory/api', // by default the virtual_directory is wscservice
srcUrl: 'https://host_name/virtual_directory/wscbundle/wscbundle.js'
});
``

Features

* AI-powered sentence checker for multilingual spelling, grammar, and style check with enhanced accuracy in 20+ languages, including English, German, and Spanish.
* Flags non-inclusive or profane English terms, suggesting unbiased alternatives.
* Combines spelling autocorrect and autocomplete suggestions for quicker and error-free writing, primarily in English dialects.
* Ensures data security with on-premise deployment options and allows user-centric customization including theme and language settings.
* Enables the creation of custom dictionaries and industry-specific vocabularies, providing users with more accurate results.
* Complies with WCAG 2.1 and Section 508 standards, featuring an accessible interface with real-time proofreading and keyboard navigation options.

Additional resources and documentation

* Further explore customization options in the WProofreader SDK documentation.
* Refer to the Change log to keep track of all notable changes and updates in the WProofreader SDK.

Technical support and issues reporting

For technical support or inquiries, reach out to us directly if you hold an active subscription or commercial license. Contact us here.

To report bugs or issues, please use the GitHub Issues section of the WProofreader SDK repository. When reporting an issue, kindly provide steps to reproduce it, and mention the browser and integration where the issue occurred.

License

The source code in this repository is licensed under the Apache 2.0 license. Please note that while the code is open-source, the usage of the WProofreader service is governed by separate terms. Refer to the LICENSE.md for detailed licensing information and related links.