Blueprint by Tiny
Return to Tiny.cloud
Return to Tiny.cloudTry TinyMCE for Free
Search by
Text "JavaScript" misspelled with spell check options in menu to correct or ignore.

JavaScript spell checker

Ben Long

August 3rd, 2020

Written by

Ben Long
Ben Long

Category

Product Management

CodePen Demo

VIEW

When you’re thinking about adding spell checking into your applications, you have many options. For example, you could add browser-based HTML spell checking or client-side JavaScript checking.

But when you’re building enterprise-grade products, designed to delight end users and empower businesses, also consider the benefits of using a robust and trusted WYSIWYG editor with server-side, multilingual spell checking, like TinyMCE and its Spell Checker Pro plugin.

The benefit of using a premium solution like Spell Checker Pro in your products is that you’re able to guarantee globally consistent spelling - organizations using your product can ensure consistency across all of their content and content authors. Plus, they’ll be able to check multiple languages all in the one document.

A user corrects spelling mistakes in multiple languages with Tiny’s Spell Checker Pro.

Try Spell Checker Pro in your JavaScript application

1. Get an API key

The easiest way to get started is to sign up for a 14 day free trial of our Cloud Professional plan. 

You will get an API key to access the editor, plus compliance features like Spell Checker Pro, Accessibility Checker, and Link Checker, and 9 additional plugins designed for increased productivity.

2. Initialize TinyMCE with Spell Checker Pro

Once you’ve got your API key, it’s simply a matter of initializing the editor within your application where you would previously have had a text entry element. Let’s start with a simple example.

Create an HTML file with the following code, replacing no-api-key with your own API key (found on your account dashboard).

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="<a href="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js">https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js</a>" referrerpolicy="origin"></script>
    <script>
      tinymce.init({
        selector: "#mytextarea",
        plugins: [
          "advlist autolink lists link image charmap print preview anchor",
          "searchreplace visualblocks code fullscreen",
          "insertdatetime media table paste tinymcespellchecker"
        ],
        toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | spellchecker | bullist numlist outdent indent | link image"
      });
    </script>
  </head>
  <body>
  <h1>TinyMCE Simple Config with Spell Checker Pro</h1>
    <form method="post">
      <textarea id="mytextarea"><p>Hello, Vorld!</p><p>Right-click on mispelled words to correct.</p></textarea>
    </form>
  </body>
</html>

TinyMCE is extremely flexible and can be customized with plugins, menus and toolbar options to suit almost any UI/UX. In this example, we have configured it with a menu, a selection of standard toolbar options, and included tinymcespellchecker in the list of plugins to enable the spell checker plugin.

Open the HTML file, and you’ll see that the WYSIWYG component is initialized on the textarea specified by the selector option.

NOTE: If, at this point, you see a warning message, make sure you have registered your domain as an approved domain in your account, and that you have replaced no-api-key with your own API Key in the above code. The message will remain if you’re opening the file locally.

Here’s the example running on CodePen:

Using TinyMCE with popular JavaScript frameworks

It’s easy to integrate TinyMCE with any of your favorite frameworks. Here are some guides to get started with the most popular ones:

What next?

See the Tiny documentation for a live demo and more information about configuring Spell Checker Pro, including the multilingual service.

If you’re not yet ready to try our premium plugins, but you’re still interested in our WYSIWYG editor, check out the Community plan. Our free WYSIWYG editor suits many use cases straight out of the box.

For more information about customizing TinyMCE to suit your specific UI/UX, we recommend starting with our guide on customizing the TinyMCE toolbar.

TinyMCE with custom skin and icons, and toolbar options grouped on the bottom.

CodePen Demo

VIEW
Spell checkingJavascript
Ben Long
byBen Long

Developer Advocate at Tiny. Computer scientist turned storyteller. Reminisces about programming on the MicroBee. Writes picture books for kids. Also the wearer of rad shoes. “Science isn’t finished until you share the story.”

Related Articles

  • A pile of blue Lego bricks.
    Product Management

    Build vs Buy: The never-ending decision

    by Marty Friedel in Product Management
Subscribe for the latest insights served straight to your inbox. Delivered weekly.

Deploy TinyMCE in just 6 lines of code

Built to scale. Developed in open source. Designed to innovate.

Begin with your FREE API Key
Tiny Editor