TinyMCE spellchecker: What are your options?

The TinyMCE WYSIWYG editor is used as the text entry component in 100M+ products worldwide, including email marketing software, content management systems, learning management systems, collaborative workspaces, design tools, blogs, and note-taking apps. For example, check out our blog post for a list of 9 products you can build with TinyMCE.

Whatever product you’re building or using with a WYSIWYG editor, chances are you’ll want to provide some level of spell checking to end users.

Tiny provides two options for spell checking in the TinyMCE WYSIWYG editor:

• The premium Spell Checker Pro plugin + multilingual service
• Browser-based spell checking

There’s also a community plugin with a PHP server-side component; however, this option is not recommended as it’s no longer supported by Tiny.

In this article, we discuss these options and how to get started with each. 

We’ll assume you’ve got an instance of TinyMCE already set up. For more information on getting started with TinyMCE, refer to our quickstart guide.

Spell Checker Pro

Not all native browser spell checkers are created equal. They vary in available languages, commonly used words, and industry-specific technical terms. However, often you and your customers will need globally consistent spelling across all content and among several content authors.

Spell Checker Pro automatically highlights words that are misspelled, and users can simply select a suggested correction with a right-click of their mouse, ensuring the level of quality and consistency you need in your content is maintained.

With Spell Checker Pro, you can specify an array of words to ignore, or add, as a part of building a custom dictionary. Most importantly, you can then make that dictionary available globally across your organization, no matter which browser is used.

Also, more situations are arising where more than one language needs to be included in a single piece of content. Spell Checker Pro can check any number of these thirteen languages simultaneously.

Get started with a free trial

Get started with a 14 day free trial of our Cloud Professional plan. This plan comes with our 9 premium productivity plugins, plus 3 additional premium plugins designed to assist with compliance, including Spell Checker Pro, Accessibility Checker, and Link Checker.

Once you have access to the premium plugin through one of our plans, you can enable the spell checker by adding the plugin to your TinyMCE initialization script (and the toolbar if required):

tinymce.init({
  selector: "textarea", // Change this value according to your HTML
  plugins: "tinymcespellchecker",
  toolbar: "spellchecker",
});

Check out the Tiny documentation for a live demo and more information about configuring the Spell Checker Pro plugin, including how to get started with multiple languages.

Browser-based spell checking

If you don’t want the additional functionality provided by Spell Checker Pro, but you need to provide basic spell checking for your users, you can enable browser-based spell checking.

Get started with browser-based spell checking

To enable browser-based spell checking in TinyMCE, set the browser_spellcheck option to true in your TinyMCE initialization script.

tinymce.init({
  selector: "textarea", // Change this value according to your HTML
  browser_spellcheck: true,
});

Using the browser’s context menu

Often users will want to access spell checking functionality from the browser’s context menu (opened on Right click). By default, TinyMCE blocks the browser’s context menu in favor of its own. But users can still access the browser-based context menu with Ctrl+Right click.

Depending on your situation, you could disable the TinyMCE context menu by setting contextmenu: false, in which case the browser’s context menu would still be accessible on Right click.

Alternatively, if you want to keep using the TinyMCE context menu, we recommend adding a note to it. For example, you could define a menu item and add it to the context menu as follows.

tinymce.init({
  /* ... */ contextmenu: "link useBrowserSpellcheck image table",
  setup: function (editor) {
    editor.ui.registry.addMenuItem("useBrowserSpellcheck", {
      text: "Use `Ctrl+Right click` to access spellchecker",
      onAction: function () {
        editor.notificationManager.open({
          text:
            "To access the spellchecker, hold the Control (Ctrl) key and right-click on the misspelt word.",
          type: "info",
          timeout: 5000,
          closeButton: true,
        });
      },
    });
    editor.ui.registry.addContextMenu("useBrowserSpellcheck", {
      update: function (node) {
        return editor.selection.isCollapsed() ? ["useBrowserSpellcheck"] : [];
      },
    });
  },
});

See this TinyMCE Fiddle for a working demo - Right click in the editor area to activate the context menu.

Check out the Tiny documentation for more information about creating custom menu items, and custom notifications.

Community plugin

There is a community plugin, with basic spell checking functionality, that was initially developed and maintained by Tiny, but it is no longer supported by Tiny because of its limited uptake - probably due to the added complexity of the PHP backend setup. For more information about the deprecation of the community plugin, see the TinyMCE 5.4 release notes.

What next?

You may also be interested in some of our other compliance features such as our Accessibility Checker and Link Checker. See our pricing page for more information about all our plans and what’s included in each.

Follow us on Twitter at @joinTiny and sign up below to receive our newsletter with loads of tips on building products with TinyMCE as well as related technologies.

Contact us at any time - we’re always keen to help our community build products with the best content creation experience possible.