WProofreader SDK package to simplify the integration into modern JavaScript applications.
npm install @webspellchecker/wproofreader-sdk-jsWProofreader 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.
To add WProofreader SDK to your project, install the npm module using the following command.
```
npm install @webspellchecker/wproofreader-sdk-js
`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`
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'
});
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.