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

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.

Supported editor setups

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

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

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:

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.

For the cloud version, add your Service ID:

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:

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.

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

Froala plugin via script tag

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

<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

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

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

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

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

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

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

Remove other spell checkers

If you've been using SCAYT or other spell check tools with Froala Editor, 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'].

Toolbar button

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

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:

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:

editor.wproofreader.destroy();

This is terminal for that editor instance. 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.

FAQ

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.