> 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/integrations/rich-text-editors/froala-editor.md).

# Froala Editor

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

[See live demo](https://demos.webspellchecker.com/wproofreader-froala.html)

#### Prerequisites <a href="#prerequisites" id="prerequisites"></a>

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.

#### Supported editor setups <a href="#supported-editor-setups" id="supported-editor-setups"></a>

The WProofreader plugin works with every Froala Editor setup: classic and textarea elements, iframe and full page modes, an inline toolbar, and deferred initialization (`initOnClick: true`). Read-only editors are supported too: proofreading is disabled on startup to match the editor state, and it follows later changes to it. When multiple editors share a page, one WProofreader bundle is loaded and shared, and if the toolbar doesn't include the button, WProofreader's own badge provides the controls.

#### Choose your integration method <a href="#choose-your-integration-method" id="choose-your-integration-method"></a>

The WProofreader plugin for Froala Editor adds native integration, including an optional toolbar button with a controls dropdown. This is the recommended approach for most projects.

| Method                       | Best for                                                                                                                                                                              |
| ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Froala plugin via npm        | Most Froala Editor projects using a build process. Installs as a native plugin with an optional toolbar button. Recommended.                                                          |
| Froala plugin via script tag | Build-free setups. Load the plugin's UMD bundle after Froala Editor.                                                                                                                  |
| npm SDK                      | JavaScript framework projects (React, Angular, Vue), or setups with multiple editors sharing one proofreading dependency. Works with Froala Editor but does not add a toolbar button. |
| Script-based (independent)   | Quick setup without a build process or the plugin. WProofreader detects the editor's editable area automatically. No toolbar button.                                                  |

#### Froala plugin via npm <a href="#froala-plugin-via-npm" id="froala-plugin-via-npm"></a>

**Installation**

Install the plugin:

```
npm install @webspellchecker/wproofreader-froala
```

Requires Froala Editor 4.x.

**Configuration**

Import Froala Editor and the plugin, then enable WProofreader through the `wproofreader` field of the editor configuration:

```js
import FroalaEditor from 'froala-editor';
import '@webspellchecker/wproofreader-froala';

new FroalaEditor('#editor', {
  wproofreader: {
    /* WProofreader config */
  }
});
```

Pass the WProofreader configuration inside the `wproofreader` field. For a full list of available options, refer to the [Configuration reference](https://webspellchecker.com/docs/api/wscbundle/Options.html).

For the cloud version, add your Service ID:

```js
wproofreader: {
  serviceId: 'your-service-ID'
}
```

`serviceId` is required to connect to the cloud version of WProofreader.

For self-hosted deployments, specify the connection parameters for your WProofreader application instead:

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

WProofreader renders its own in-editor badge for instant and in dialog proofreading. Adding a toolbar button is optional, see [Toolbar button](https://file+.vscode-resource.vscode-cdn.net/Users/A-OKLADOV-M1/Desktop/froala-editor.md#toolbar-button).

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

**Toolbar button**

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

```js
new FroalaEditor('#editor', {
  toolbarButtons: ['bold', 'italic', 'underline', '|', 'wproofreader'],
  wproofreader: {
    serviceId: 'your-service-ID',
    lang: 'en_US'
  }
});
```

Clicking the button opens a dropdown with the following options:

* **Enable** or **Disable**, turns proofreading on or off. The item shown follows the current state.
* **Settings**, opens the WProofreader settings dialog.
* **Proofread in dialog**, opens the proofreading dialog.

While proofreading is off, only **Enable** is shown. **Settings** and **Proofread in dialog** appear once it is on. If the toolbar does not include `'wproofreader'`, the button is not added, and WProofreader's own badge provides the controls.

**Programmatic control**

Reach the plugin through the editor instance:

```js
const wpr = editor.wproofreader;

wpr.enable();        // start proofreading
wpr.disable();       // stop proofreading
wpr.isDisabled();    // returns true when proofreading is off
wpr.openSettings();  // open the settings dialog
wpr.openDialog();    // open the proofreading dialog
wpr.destroy();       // remove WProofreader and its toolbar button
```

**Removing WProofreader**

Call `destroy()` to remove WProofreader from a living editor. It removes the toolbar button and the WProofreader instance, and releases their resources:

```js
editor.wproofreader.destroy();
```

WProofreader returns only when the editor itself is destroyed and re-created. `destroy()` is also called automatically when the editor is destroyed, so you don't need to call it yourself in that case.

#### Froala plugin via script tag <a href="#froala-plugin-via-script-tag" id="froala-plugin-via-script-tag"></a>

For a setup without a build step, load the plugin's UMD bundle after Froala Editor:

```html
<script src="froala-editor/js/froala_editor.pkgd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@webspellchecker/wproofreader-froala@1.0.0/dist/index.umd.cjs"></script>

<div id="editor">
  <p>Hello, World!</p>
</div>

<script>
  new FroalaEditor('#editor', {
    wproofreader: {
      serviceId: 'your-service-ID'
    }
  });
</script>
```

For self-hosted deployments, replace the `wproofreader` config block with your server connection parameters, the same as in the npm setup above.

#### npm SDK integration <a href="#npm-sdk-integration" id="npm-sdk-integration"></a>

The WProofreader SDK npm package is a universal integration method that works with any editor, including Froala Editor. It's a good fit for JavaScript framework projects (React, Angular, Vue) or projects that use multiple editors and want a single shared WProofreader dependency. It does not include the toolbar button that the dedicated plugin provides.

For setup instructions, refer to the [Initialize using npm SDK](https://file+.vscode-resource.vscode-cdn.net/integrations/initialization/initialization-options/initialize-using-npm-sdk) guide. It covers installation, configuration, and usage with `autoSearch` and `init()`. When using `init()` with Froala Editor, pass the correct container depending on the rendering mode:

```js
import FroalaEditor from 'froala-editor';
import WEBSPELLCHECKER from '@webspellchecker/wproofreader-sdk-js';

new FroalaEditor('#editor', {
  iframe: true,
  events: {
    initialized: function () {
      WEBSPELLCHECKER.init({
        container: this.$iframe ? this.$iframe[0] : this.el,
        serviceId: 'your-service-ID'
      });
    }
  }
});
```

Froala Editor can render content either inside an iframe or directly in the page element. When `iframe: true` is set, WProofreader needs to attach to the iframe element, otherwise it falls back to the editable element itself (`this.el`). The ternary expression handles both cases automatically.

#### Script-based integration <a href="#script-based-integration" id="script-based-integration"></a>

If you don't use a build process and don't need a toolbar button, you can integrate WProofreader independently using `autoSearch`. This detects Froala Editor's editable area automatically when a user focuses on it. For setup instructions, refer to the [Initialize using autoSearch](https://file+.vscode-resource.vscode-cdn.net/integrations/initialization/initialization-options#initialize-using-autosearch) guide.

If you want proofreading to start on editor load without waiting for focus, use `init()` inside Froala Editor's `initialized` event:

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

<div id="froala-editor">
  <p>Your text here.</p>
</div>

<script>
new FroalaEditor('#froala-editor', {
  iframe: true,
  events: {
    initialized: function () {
      WEBSPELLCHECKER.init({
        container: this.$iframe ? this.$iframe[0] : this.el
      });
    }
  }
});
</script>
```

Setting `autoSearch: true` and `autoDestroy: true` alongside `init()` ensures WProofreader recovers correctly when Froala Editor switches between editing modes, for example toggling WYSIWYG and code view.

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,
  autoDestroy: true,
  serviceProtocol: 'https',
  serviceHost: 'your_host_name',
  servicePort: '443',
  servicePath: 'wscservice/api'
};
</script>
<script src="https://your_host_name/wscservice/wscbundle/wscbundle.js"></script>
```

#### FAQ <a href="#faq" id="faq"></a>

**Which integration method should I use?**

For most projects using a build process, use the Froala plugin. It registers natively and gives you an optional toolbar button with a controls dropdown. If you're loading Froala Editor without a build step, use the script tag method. 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 too, but also doesn't add a toolbar button.

**Does Froala Editor have a dedicated WProofreader plugin?**

Yes. WProofreader is available as a native Froala Editor plugin with an optional toolbar button, in addition to the existing script-based and npm SDK methods.

**Does the plugin support TypeScript?**

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

**What's the difference between WProofreader and Froala Editor's built-in spell checker?**

Froala Editor's native spell checker plugin offers basic spelling check only. WProofreader adds grammar, style, and punctuation checking, spelling autocorrect, text autocomplete, automatic language detection, and custom dictionaries.

**Does the plugin support the HTML code view?**

Yes. While the HTML code view is active, WProofreader is paused, and it resumes automatically after switching back to the WYSIWYG view.

**Does destroy() remove the toolbar button?**

Only when you call it yourself on a living editor. Froala Editor has no dedicated API to remove a single toolbar button, so the plugin removes the button element directly. When the editor itself is destroyed, Froala Editor tears down its whole toolbar on its own, and the plugin only releases its internal resources without touching the DOM.