Quill

Quill

This guide covers how to add WProofreader spelling, grammar, and style checking to Quill. It applies to both cloud and self-hosted deployments and supports Quill 2.x.

Prerequisites

You'll need an active WProofreader subscription or trial. Sign up for a free trial or choose a plan. For the cloud version, you'll need a Service ID. You can find it on the Credentials page in the admin panel after signing up. For self-hosted, you'll need the endpoint of your WProofreader application (protocol, host, port, and path) to specify in the configuration parameters.

The WProofreader module for Quill is available as an npm package (@webspellchecker/wproofreader-quill) and the source is on GitHub.

Supported editor setups

The WProofreader module supports the following Quill setups:

Setup	Supported
Snow theme	Yes
Bubble theme	Yes. No toolbar button is added; WProofreader's own badge is used
Read-only editors	Yes. Proofreading is disabled on startup when the editor is read-only
Multiple editors on a page	Yes. One WProofreader bundle is loaded and shared

Choose your integration method

The Quill module adds native integration, including an optional toolbar button with a controls dropdown. This is the recommended approach for most projects.

Method	Best for
Quill module via npm	Most Quill projects using a build process. Installs as a native module with an optional toolbar button. Recommended.
npm SDK	Projects using multiple editors that want a single shared WProofreader dependency. Works with Quill but does not add a toolbar button.
Script-based (independent)	Quick setup without a build process. WProofreader detects the editor's editable area automatically. No toolbar button.

Quill module via npm

Installation

Install the WProofreader module and Quill. Quill is a peer dependency, so install it alongside the module:

npm install @webspellchecker/wproofreader-quill
npm install quill

Configuration

Import Quill, the module (which registers itself as modules/wproofreader), and the module styles. Then enable it in the editor configuration.

import Quill from 'quill';
import 'quill/dist/quill.snow.css';

import '@webspellchecker/wproofreader-quill';
import '@webspellchecker/wproofreader-quill/styles.css';

For the cloud version:

new Quill('#editor', {
  theme: 'snow',
  modules: {
    wproofreader: {
      serviceId: 'your-service-ID',
      lang: 'en_US'
    }
  }
});

For self-hosted deployments, replace the wproofreader config block with your server connection parameters:

wproofreader: {
  lang: 'en_US',
  serviceProtocol: 'https',
  serviceHost: 'your_host_name',
  servicePort: '443',
  servicePath: 'wscservice/api',
  srcUrl: 'https://your_host_name/wscservice/wscbundle/wscbundle.js'
}

All options are forwarded to the WProofreader engine. For the full list, refer to the Configuration reference.

The module includes TypeScript support. The package contains a type definition file (.d.ts) that enables configuration of WProofreader options in TypeScript projects.

WProofreader renders its own in-editor badge for instant and in dialog proofreading. Adding a toolbar button is optional (see below).

Toolbar button

To show a WProofreader button on the toolbar, add 'wproofreader' to the toolbar configuration:

new Quill('#editor', {
  theme: 'snow',
  modules: {
    toolbar: [
      ['bold', 'italic', 'underline'],
      ['wproofreader']
    ],
    wproofreader: {
      serviceId: 'your-service-ID',
      lang: 'en_US'
    }
  }
});

Clicking the button opens a dropdown with the following options:

• Toggle, turns proofreading on or off.

• Settings, opens the WProofreader settings dialog.

• Proofread in dialog, opens the proofreading dialog.

The button becomes active once WProofreader has finished initializing. While proofreading is off, only Toggle is shown; Settings and Proofread in dialog appear once it is on. If the toolbar does not include 'wproofreader' (or the editor has no toolbar, for example with the bubble theme), the button is not added, and WProofreader's own badge provides the controls.

Programmatic control

Reach the module through Quill's registry and control it in code:

const wp = quill.getModule('wproofreader');

wp.enable();        // start proofreading
wp.disable();       // stop proofreading
wp.toggle();        // flip the current state
wp.isDisabled();    // returns true when proofreading is off
wp.openSettings();  // open the settings dialog
wp.openDialog();    // open the proofreading dialog
wp.destroy();       // remove WProofreader and release resources

Read-only editors

If the editor starts read-only (readOnly: true), proofreading is disabled on startup to match the editor state.

Removing WProofreader

Quill does not provide a module teardown lifecycle, so call destroy() yourself when removing the editor. It removes the WProofreader instance and the toolbar dropdown, and releases their resources.

quill.getModule('wproofreader').destroy();

npm SDK integration

The WProofreader SDK npm package is a universal integration method that works with any editor, including Quill. It's a good fit for projects that use multiple editors and want a single shared WProofreader dependency. It does not include the Quill toolbar button that the dedicated module provides.

For setup instructions, refer to the Initialize using npm SDK guide. It covers installation, configuration, and usage with autoSearch and init(). When using init() with Quill, pass the editor's editable area as the container:

import Quill from 'quill';
import WEBSPELLCHECKER from '@webspellchecker/wproofreader-sdk-js';

const quill = new Quill('#editor', { theme: 'snow' });

WEBSPELLCHECKER.init({
  container: quill.root, // the .ql-editor element
  serviceId: 'your-service-ID'
});

Script-based integration

If you don't use a build process and don't need a toolbar button, you can integrate WProofreader independently using autoSearch. This detects Quill's editable area (a contenteditable element) automatically when a user focuses on it. For setup instructions, refer to the Initialize using autoSearch guide.

For the cloud version:

<script>
window.WEBSPELLCHECKER_CONFIG = {
  autoSearch: true,
  serviceId: 'your-service-ID'
};
</script>
<script src="https://svc.webspellchecker.net/spellcheck31/wscbundle/wscbundle.js"></script>

For self-hosted deployments, replace serviceId with the server connection parameters and update the script src to point to your server:

<script>
window.WEBSPELLCHECKER_CONFIG = {
  autoSearch: true,
  serviceProtocol: 'https',
  serviceHost: 'your_host_name',
  servicePort: '443',
  servicePath: 'wscservice/api'
};
</script>
<script src="https://your_host_name/wscservice/wscbundle/wscbundle.js"></script>

What's next

After integration, you can customize WProofreader further:

• Configuration reference for the full list of options (default language, UI localization, check types, custom dictionaries, and more).

• Features an overview to explore custom dictionaries, style guide rules, AI writing assistant (AIWA), and other capabilities.

• Demos to see working examples with Quill and other editors.

FAQ

Which integration method should I use?

For most projects using a build process, use the Quill module. It registers natively and gives you an optional toolbar button with a controls dropdown. The npm SDK works if you have multiple editors sharing one WProofreader dependency, but you'll lose the toolbar button. The script-based method works without a build step but also doesn't add a toolbar button.

Does the module support TypeScript?

Yes. The package includes a type definition file (.d.ts) that enables configuration of WProofreader options in TypeScript projects.