> 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.12.0/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.

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

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

### Choose your integration method

There are two ways to integrate WProofreader with Froala Editor.

| Method       | Best for                                                                                                                 |
| ------------ | ------------------------------------------------------------------------------------------------------------------------ |
| Script-based | Quick setup without a build process. Add the config and script to your HTML page.                                        |
| NPM SDK      | JavaScript framework projects (React, Angular, Vue) or setups with multiple editors sharing one proofreading dependency. |

Both methods work with any Froala Editor version.

### Script-based integration

The simplest approach is `autoSearch`, which detects Froala Editor's editable area automatically when a user focuses on it. For setup instructions, refer to the [Initialize using autoSearch](/v6.12.0/integrations/initialization/initialization-options.md#initialize-using-autosearch) guide.

#### Using init() for immediate activation

If you want proofreading to start on editor load without waiting for focus, use `init()` inside Froala's `initialized` event. This starts proofreading as soon as the editor is ready.

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

The `container` value depends on Froala's rendering mode. When `iframe: true` is set, Froala renders content inside an iframe, so the container should be `this.$iframe[0]`. Otherwise, it falls back to `this.el` (the editable element itself). The ternary expression handles both cases automatically.

Setting `autoSearch: true` and `autoDestroy: true` alongside `init()` ensures WProofreader recovers correctly when Froala 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>
```

### NPM SDK integration

The WProofreader SDK npm package is a universal integration method that works with any editor, including Froala. It's a good fit for JavaScript framework projects (React, Angular, Vue) or when you use multiple editors and want a single proofreading dependency.

For setup instructions, refer to the [Initialize using npm SDK](/v6.12.0/integrations/initialization/initialization-options/initialize-using-npm-sdk.md) guide. It covers installation, configuration, and usage with `autoSearch` and `init()`.

### Remove other spell checkers

If you've been using SCAYT or other spell check tools with Froala, remove them to avoid conflicts. To identify *SCAYT* references in your project, search for: `SCAYT`, `spell_checker.min.js`, `spell_checker.min.css`, `scaytCustomerId`, `scaytAutoload`, `pluginsEnabled: ['spellChecker']`.

### 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](/v6.12.0/features/spell-and-grammar-check.md) overview to explore custom dictionaries, style guide rules, AI writing assistant, and other capabilities.
* [Demos](https://demos.webspellchecker.com/) to see working examples with Froala and other editors.
* [Froala's WProofreader example](https://froala.com/wysiwyg-editor/examples/web-spell-checker/) on the Froala website.

### FAQ

#### Does Froala have a dedicated WProofreader plugin?

No. Unlike TinyMCE and CKEditor 5, Froala doesn't have a dedicated WProofreader plugin with a toolbar button. WProofreader integrates with Froala through the script-based or NPM SDK methods and provides its own floating UI for suggestions.

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

Froala'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.

#### Why does the init() example check for this.$iframe?

Froala 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. The ternary expression (`this.$iframe ? this.$iframe[0] : this.el`) handles both modes automatically.