> 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/tinymce-6+.md).

# 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 →](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 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 →](https://www.npmjs.com/package/@webspellchecker/wproofreader-tinymce).

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

#### Install using CDN

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

{% code overflow="wrap" %}

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

{% endcode %}

For self-hosted deployments, replace the `wproofreader` config:

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

```bash
npm install @webspellchecker/wproofreader-tinymce
```

2. Make the plugin's `dist/plugin.min.js` accessible via your web server or build tool.
3. Reference the plugin with `external_plugins`:

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

```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'
  }
});
```

#### ES module import

For ES6/bundler projects, import the plugin directly:

```js
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 →](/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 TinyMCE's `init_instance_callback`:

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

<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 →](/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 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 →](https://webspellchecker.com/docs/api/wscbundle/Options.html) for the full list of options (default language, UI localization, check types, custom dictionaries, and more).
* [Organization dictionary →](/v6.12.0/features/custom-dictionary/organization-dictionary.md) to set up shared wordlists for your team.
* [Demos →](https://demos.webspellchecker.com/) 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.