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


---

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