TinyMCE 6+

This guide covers how to add WProofreader spelling, grammar, and style checking to TinyMCE. It applies to both Cloud and self-hosted deployments.

The dedicated plugin with toolbar button and native theme is available for TinyMCE 6+. Script-based and NPM SDK methods work with any TinyMCE version.

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 three ways to integrate WProofreader with TinyMCE. Pick the one that fits your setup.

Method	Best for	TinyMCE versions	Toolbar button and theme
Dedicated plugin (recommended for TinyMCE 6+)	Projects that want a native TinyMCE experience with a toolbar icon and matching theme.	6+	Yes
Script-based	Quick setup without a build process. Works with any TinyMCE version.	Any	No
NPM SDK	JavaScript framework projects (React, Angular, Vue) or setups with multiple editors sharing one proofreading dependency.	Any	No

Dedicated plugin

The dedicated plugin adds a WProofreader button to the TinyMCE toolbar and applies a theme that matches the editor's look and feel. Available as an npm package →.

See live demo →

Install using CDN

Use external_plugins to load the plugin directly from a CDN. No installation or build tools needed.

<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/8/tinymce.min.js" referrerpolicy="origin"></script>

<textarea id="editor">Your text here.</textarea>

<script>
  tinymce.init({
    selector: '#editor',
    external_plugins: {
      wproofreader: 'https://cdn.jsdelivr.net/npm/@webspellchecker/wproofreader-tinymce@1.0.0/dist/plugin.min.js'
    },
    toolbar: 'undo redo | bold italic | wproofreader',
    wproofreader: {
      serviceId: 'your-service-ID',
      srcUrl: 'https://svc.webspellchecker.net/spellcheck31/wscbundle/wscbundle.js'
    }
  });
</script>

For self-hosted deployments, replace the wproofreader config:

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

Install using npm

1. Install the package:

npm install @webspellchecker/wproofreader-tinymce

1. Make the plugin's dist/plugin.min.js accessible via your web server or build tool.

2. Reference the plugin with external_plugins:

<script>
  tinymce.init({
    selector: '#editor',
    external_plugins: {
      wproofreader: '/path/to/@webspellchecker/wproofreader-tinymce/dist/plugin.min.js'
    },
    toolbar: 'undo redo | bold italic | wproofreader',
    wproofreader: {
      serviceId: 'your-service-ID',
      srcUrl: 'https://svc.webspellchecker.net/spellcheck31/wscbundle/wscbundle.js'
    }
  });
</script>

Alternatively, copy the plugin's dist folder into TinyMCE's plugins directory, rename it to wproofreader, and use plugins instead of external_plugins:

tinymce.init({
  selector: '#editor',
  plugins: 'wproofreader',
  toolbar: 'undo redo | bold italic | wproofreader',
  wproofreader: {
    serviceId: 'your-service-ID',
    srcUrl: 'https://svc.webspellchecker.net/spellcheck31/wscbundle/wscbundle.js'
  }
});

ES module import

For ES6/bundler projects, import the plugin directly:

import tinymce from 'tinymce';
import 'tinymce/themes/silver/theme.min.js';
import 'tinymce/models/dom/model.min.js';
import 'tinymce/skins/ui/oxide/skin.js';
// ... other TinyMCE imports

import '@webspellchecker/wproofreader-tinymce/src/plugin.js';

tinymce.init({
  selector: '#editor',
  plugins: 'wproofreader',
  toolbar: 'undo redo | bold italic | wproofreader',
  wproofreader: {
    serviceId: 'your-service-ID',
    srcUrl: 'https://svc.webspellchecker.net/spellcheck31/wscbundle/wscbundle.js'
  }
});

Script-based integration

This method uses the WProofreader script to enable proofreading in TinyMCE. It doesn't require the dedicated plugin and works with any TinyMCE version.

The simplest approach is autoSearch, which detects TinyMCE'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 TinyMCE's init_instance_callback:

<script>
  window.WEBSPELLCHECKER_CONFIG = {
    autoSearch: true,
    autoDestroy: true,
    serviceId: 'your-service-ID'
  };
</script>

<script src="https://svc.webspellchecker.net/spellcheck31/wscbundle/wscbundle.js"></script>

<textarea id="editor">Your text here.</textarea>

<script>
  tinymce.init({
    selector: '#editor',
    init_instance_callback: function(editor) {
      WEBSPELLCHECKER.init({
        container: editor.iframeElement
      });
    }
  });
</script>

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

NPM SDK integration

The WProofreader SDK npm package is a universal integration method that works with any editor, including TinyMCE. 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 other spell check tools (including TinyMCE's built-in spell checker), remove or disable them to avoid conflicts.

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

• Organization dictionary → to set up shared wordlists for your team.

• Demos → to see working examples with TinyMCE and other editors.

FAQ

Which TinyMCE versions are supported?

The dedicated plugin works with TinyMCE 6 and later, including TinyMCE 7 and 8. Script-based and NPM SDK integration methods work with any TinyMCE version.

How is this different from TinyMCE's built-in spell checker?

TinyMCE's built-in spell checker covers spelling only. WProofreader adds grammar, style, and punctuation checking, spelling autocorrect, text autocomplete, automatic language detection, and custom dictionaries.

Can I use the Cloud and self-hosted versions interchangeably?

Yes. The integration code is the same. The only difference is the connection parameters: serviceId for the Cloud version, and server connection parameters (serviceProtocol, serviceHost, servicePort, servicePath) plus the srcUrl for self-hosted.

Why don't my changes appear immediately after integration?

WProofreader needs a moment to load and initialize. If you're using autoSearch, proofreading starts when the editor receives focus. If you need it immediately on page load, use the init() method.