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

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.

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

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

<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 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 for the full list of options (default language, UI localization, check types, custom dictionaries, and more).

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

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

• Froala's WProofreader example 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.