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

How to automatically check for spelling errors with a spell check API

June 27th, 2023

3 min read

Eyes in binoculars checking a document for spelling errors

Written by

Joe Robinson

Category

How-to Use TinyMCE

Customers need the right tools to create good content in your app, but it’s unfortunately easy for content creation apps to let their customers down. This is true in regards to spell checking. Stopping at highlighting typos is really not enough to provide the spell check best experience. You could spend time working on different spell check APIs to build a more comprehensive experience, but unfortunately you’ve many other requirements to optimize in your content creator that take precedence. 

There is a solution: rich text editors that provide a comprehensive spell check API. A rich text editor that provides a comprehensive spell check API can actively help you to make your content creator app outshine the competition. Fortunately, TinyMCE’s Spell Checker Pro comes with a spell check API with automation in mind. A new event and a new spell check API is now available with the TinyMCE 6.5 release. This post explains how TinyMCE’s spell check API and spell check event work to help improve the content creation experience.

How to check for spelling errors automatically

When using TinyMCE’s Spell Checker Pro events, even if you disable Spell Checker Pro by default, you can still check for typos and spelling errors by including the getSpellingErrrors event into your content creator.

The following demo shows how the event can work as part of a form submission. It assumes you have a text editor ready, and can access the command line. TinyMCE’s Spell Checker Pro is a Premium plugin, but you can access it and all our other Premium features, for FREE, for 14 days when you sign up for a TinyMCE API key.

Checking for spelling errors with an event

  1. Create an index.html file in your development environment.

  2. Add the following HTML content:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>TinyMCE Spell Check API</title>
    </head>
    <body>
        <form method="post">
            <textarea id="editor">
                <p>
                    <ul>
                        <li>accommodate // accomodate</li>
                        <li>achieve // acheive</li>
                        <li>across // accross</li>
                        <li>aggressive // agressive</li>
                        <li>argument // arguement</li>
                        <li>weird // wierd</li>
                        <li>wherever // whereever</li>
                        <li>which // wich</li>
                    </ul>
                </p>
            </textarea>
            <input type="submit">
        </form>
        <div id="messages"></div>
    </body>
</html>
  1. Include the following script tags, replacing the “your-api-key” string with your TinyMCE API key:

<script src="https://cdn.tiny.cloud/1/your-api-key/6-dev/tinymce.min.js" referrerpolicy="origin"></script>
        <script type="text/javascript">
            tinymce.init({
                selector: "#editor",
                plugins: [
                    "advlist",
                    "anchor",
                    "autolink",
                    "charmap",
                    "code",
                    "fullscreen",
                    "help",
                    "image",
                    "insertdatetime",
                    "link",
                    "lists",
                    "media",
                    "preview",
                    "searchreplace",
                    "tinymcespellchecker",
                    "table",
                    "visualblocks",
                ],
               toolbar: "undo redo | styles | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
               spellchecker_active: false,
  1. Add the following script before the closing </html> tag of the demo:

    </body>
    <script>
        addEventListener('submit', function() {
            event.preventDefault();
            tinymce.activeEditor.execCommand('mceSpellcheckUpdate');
        })
    </script>
</html>
  1. Try submitting the form. Instead of the submission process, the getSpellingErrrors event flags all the typos in the TinyMCE text area:

The spell check API automatically flagging typos

Checking for spelling errors with a spell check API

TinyMCE’s spell check API getSpellingErrors() detects and collects all the misspelled words, and returns them in the form of a JavaScript object. This JSON formatted object has the following structure:

  1. The outer key designates the language configured for TinyMCE Spell Checker Pro.

  2. The key contained within the language array references the misspelled word directly, and the associated values are suggested alternatives for the word.

The following procedure tests the spell check API, and makes use of the blur event:

  1. In your index.html file, modify the TinyMCE init script to contain the following setup option for the editor, making use of the spell check API getSpellingErrors():

setup: (editor) => {
                    editor.on('blur', function() {
                        var SpellingWords = editor.plugins.tinymcespellchecker.getSpellingErrors()
                        console.log(SpellingWords)
                        alert.SpellingWords;
                          if ( SpellingWords.length > 0 ) {
                            document.getElementById("messages").innerHTML = "<p class='warningErrors'>Errors detected! Please check spelling</p>"
                          } else {
                           document.getElementById("messages").innerHTML = "<p class='notypoError'>No errors detected</p>"
                        } 
                    })
                }
            });
        </script>
  1. Add a style tag to the head section of the HTML after the TinyMCE init script, and add the following style options:

       <style>
            .warningErrors {
                padding: 10px;
                font-size: 14px;
                color: red;
            }
            .notypoError {
                padding: 10px;
                font-size: 14px;
                color: green;
            }
        </style>

 

  1. Save the changes, and then try out the Spell Checker Pro API method:

The spell checker pro API method working to automatically flag errors in spelling

With a script like the one configured in the demo, the spell check API automatically returns useful information from the getSpellingErrors() API. The demo checks the length of the JSON object returned, and introduces a more immersive content creation experience, using the  spell check API.

You could also parse the object, and provide detailed information about what words need correction without needing to write instructions to check the rich text editor and make a list of spelling errors.

Content creation experiences and TinyMCE

For more information on the different content creation capacity available with TinyMCE, explore the tutorial on creating a Content Management System (CMS) using TinyMCE. The TinyMCE CMS solution also shows what content creation experiences are possible.

If the automation capacity of the TinyMCLE Spell Checker Pro APIs sounds like a fit for your app, contact us for more information on incorporating TinyMCE into your projects.

TinyMCEAPIProduct Development
byJoe Robinson

Technical and creative writer, editor, and a TinyMCE advocate. An enthusiast for teamwork, open source software projects, and baking. Can often be found puzzling over obscure history, cryptic words, and lucid writing.

Related Articles

  • How-to Use TinyMCEApr 16th, 2024

    How to enable a Bootstrap WYSIWYG editor: a step-by-step guide

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.