> For the complete documentation index, see [llms.txt](https://docs.wproofreader.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.wproofreader.com/v6.14.0/integrations/rich-text-editors/quill.md).

# Quill

## Quill

This guide covers how to add WProofreader spelling, grammar, and style checking to [Quill](https://quilljs.com). 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](https://wproofreader.com/sdk#pricing). For the cloud version, you'll need a Service ID. You can find it on the [Credentials](https://app.wproofreader.com/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.

{% hint style="info" %}
The WProofreader module for Quill is available as an npm package ([@webspellchecker/wproofreader-quill](https://www.npmjs.com/package/@webspellchecker/wproofreader-quill)) and the source is on [GitHub](https://github.com/WebSpellChecker/wproofreader-quill).
{% endhint %}

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

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

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

For the cloud version:

```js
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:

```js
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](https://webspellchecker.com/docs/api/wscbundle/Options.html).

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:

```js
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:

```js
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.

```js
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](#npm-sdk-integration) 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:

```js
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](/v6.14.0/integrations/initialization/initialization-options.md) guide.

For the cloud version:

```html
<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:

```html
<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](https://webspellchecker.com/docs/api/wscbundle/Options.html) 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](https://demos.webspellchecker.com/) 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.