# 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](/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](/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](/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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.wproofreader.com/integrations/rich-text-editors/froala-editor.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.