14-day Cloud trial
Start today. For free.

One editor. 50+ features. Zero constraints. After your trial, retain the advanced features.

Try Professional Plan for FREE
PricingContact Us
Log InGet Started Free

JavaScript spell checker

August 3rd, 2020

3 min read

Text "JavaScript" misspelled with spell check options in menu to correct or ignore.

Written by

Ben Long

Category

World of WYSIWYG

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="https://cdn.tiny.cloud/1/no-api-key/tinymce/6/tinymce.min.js" 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
byBen Long

Computer scientist, storyteller, teacher, and an advocate of TinyMCE. 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

  • World of WYSIWYGNov 29th, 2023

    Best WYSIWYG editor image upload solutions compared: under pressure

Join 100,000+ developers who get regular tips & updates from the Tiny team.

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Tiny logo

Stay Connected

SOC2 compliance badge

Products

TinyMCEDriveMoxieManager
© Copyright 2024 Tiny Technologies Inc.

TinyMCE® and Tiny® are registered trademarks of Tiny Technologies, Inc.