Blueprint by Tiny
Return to Tiny.cloud
Return to Tiny.cloudTry TinyMCE for Free
Search by

How to add spelling autocorrect to your app

Joe Robinson

October 31st, 2022

3 min read

Written by

Joe Robinson

Category

How-to Use TinyMCE

When you type in a frenzy, s imple words like ‘the’ easily become ‘teh’. It’s not a problem, unless you’re designing and building content app features, and you’re getting hit with support tickets: customers asking for autocorrect.

It’s like being in an avalanche, and the weight of fixing this small but annoying issue grows with each day that goes past. You can solve the problem though, and the support tickets for autocorrect will stop piling up. Except it might take six to eighteen months to test and get working.🤔

What about an autocorrect solution that you can add to your app right now? With TinyMCE, the enterprise-grade, reliable WYSIWYG, you can activate Spelling Autocorrect with just a few lines of JavaScript in your app. It can identify and correct minor misspellings on the fly, and even catch and fix capitalization after a full stop.

This article shows you how to set up TinyMCE as your rich text editor, and how to activate Spelling Autocorrect  and save your sanity from a support ticket frenzy.

Adding Spelling Autocorrect to your app

Setting up TinyMCE

To get started adding the Spelling Autocorrect Plugin, start by setting up a demo drawn from the TinyMCE Customer Relationship Manager (CRM) solution. The ability to capture errors and fix them as they happen is valuable in a customer relations setting:

  1. Create an index.html file, and add the following JavaScript to the head section:
  <script>
    tinymce.init({
      selector: '#editor',
      menubar: false,
      statusbar: false,
      plugins: 'advcode autoresize editimage emoticons image link linkchecker lists mergetags powerpaste tinymcespellchecker',
      max_height: 500,
      autoresize_bottom_margin: 20,
      toolbar: 'undo redo | spellchecker | formatgroup | link emoticons image mergetags | code',
      toolbar_location: 'bottom',
      images_file_types: "jpeg,jpg,png,gif",
      spellchecker_active: false,
      powerpaste_word_import: 'clean',
      powerpaste_googledocs_import: 'clean',
      powerpaste_html_import: 'clean',
      mergetags_list: [
      {
        title: "Lead",
        menu: [{
          value: 'Lead.FirstName',
          title: 'Lead First Name'
        },
        {
          value: 'Lead.LastName',
          title: 'Lead Last Name'
        },
        {
          value: 'Lead.Organization',
          title: 'Lead Organization'
        },
        {
          value: 'Lead.Email',
          title: 'Lead Email'
        }
        ]
      },
      {
        title: "Sender",
        menu: [{
          value: 'Sender.FirstName',
          title: 'Sender First Name'
        },
        {
          value: 'Sender.LastName',
          title: 'Sender Last Name'
        },
        {
          value: 'Sender.Organization',
          title: 'Sender Organization'
        },
        {
          value: 'Sender.Email',
          title: 'Sender Email'
        }
        ]
      },
      {
        title: 'Subscription',
        menu: [{
          value: 'Subscription.UnsubscribeLink',
          title: 'Unsubscribe Link'
        },
        {
          value: 'Subscription.Preferences',
          title: 'Subscription Preferences'
        }
        ]
      }
      ],
      content_style: `
        body {
          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Helvetica, Arial, sans-serif;
          font-size: 14px;
          line-height: 1.5rem;
        }
        h1 {
          font-size: 24px;
        }
        h2 {
          font-size: 18px;
        }
      `
    });
  </script>
  1.  If you haven’t yet tried TinyMCE, sign up now for your FREE API key . The key comes with 14 days free access to TinyMCE Premium plugins, as well as Premium skins and icons.
  1.  Add your API key in place of the “your-api-key” string inside the TinyMCE CDN link (used for accessing TinyMCE through the cloud)
<script
  src="https://cdn.tiny.cloud/1/your-api-key/tinymce/6/tinymce.min.js"
  referrerpolicy="origin"
></script>;
  1. Add some style content to the head section after the script tags:
  <style>
      body {
          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Helvetica, Arial, sans-serif;
          font-size: 14px;
          margin: 2rem;
      }
      main {
          max-width: 800px;
          margin: auto;
      }
  </style>
  1. Add the CRM basic HTML content to the body section of the index.html file:
<body>
<main>
  <textarea id="editor">
    <p>Hi {{Lead.FirstName}},</p>
    <h2>What's your CRM editor project?</h2>
  </textarea>
</main>
</body>
  1. Save the changes and test out the demo in your browser by opening the html file with the browser, or running a local host command with Python, or with PHP:

TinyMCE working in the browser

Setting up Spelling Autocorrect plugin

  1. Add the plugin to the plugin list:
      plugins: 'advcode autcorrect autoresize editimage emoticons image link linkchecker lists mergetags powerpaste tinymcespellchecker',
  1. Configure the menubar to appear above the toolbar:
  <script>
    tinymce.init({
      selector: '#editor',
      menubar: true,
  1. Narrow down the menubar options to just the tools menu by using the menu option to specify just the tools option:
  <script>
    tinymce.init({
      selector: '#editor',
      menubar: true,
      menu: {
        tools: { title: 'Menu', items: 'spellchecker spellcheckerlanguage autocorrect capitalization | a11ycheck code wordcount' },
      },
  1. Set the menubar option to ‘tools’, and change the title value from ‘tools’ to ‘Menu’:
      menubar: 'tools',
      menu: {
        tools: { title: 'Menu', items: 'spellchecker spellcheckerlanguage autocorrect capitalization | a11ycheck code wordcount' },
      },

Save the changes, and then test out the new menu option, and turn autocorrection on and off:

Toggle the autocorrect function on and off

You can now test out the auto correction capacity in the demo CRM:

Autocorrect working in the browser

Autocorrection essential information:

The TinyMCE Spelling Autocorrect plugin has some points to note for your application. Please note that the plugin:

  • Only supports the English language
  • It’s currently not possible to refine the plugin, and prevent it from autocorrecting certain sequences of letters. For instance, when autocorrect is activated, “cna” will correct to “can”, unless you type the word in capital letters, as “CNA” will remain unchanged. 
  • Autocorrect will only work if the letter capitalization matches the capitalization of the letters in the plugin’s word list.

Note: Check on the TinyMCE documentation for more information on the plugin.

Disabling autocorrection, or enabling autocorrection

Now that autocorrect can be switched on and off in the new menu option, it’s possible to adjust the Spelling Autocorrect plugin with different options.

Enable or disable autocorrection when the editor loads

Set the autocorrect_autocorrect option to “true”  to make sure the plugin is activated when TinyMCE loads:

  <script>
    tinymce.init({
      selector: '#editor',
      menubar: 'tools',
      menu: {
        tools: { title: 'Menu', items: 'spellchecker spellcheckerlanguage autocorrect capitalization | a11ycheck code wordcount' },
      },
      autocorrect_autocorrect: true,

Enable or disable capitalization when the editor loads

Set the autocorrect_capitalize option  to “true” to activate capitalization of sentences when the editor loads:

<script>
  tinymce.init({
     selector: '#editor',
     menubar: 'tools',
     menu: {
        tools: { title: 'Menu', items: 'spellchecker spellcheckerlanguage autocorrect capitalization | a11ycheck code wordcount' },
   },
      autocorrect_autocorrect: true,
      autocorrect_capitalize: true,

Using Spelling Autocorrect to keep removing small errors

With Spelling Autocorrect enabled, you can quickly scale up your app to meet the demands of your customers, taking away small errors as they happen. You can further add to their experience with features like:

There’s a lot that’s possible when it comes to saving your customers time and turning churn into advocacy when your customers use TinyMCE as their rich text editor.

Contact us if you need  more information on using the Spelling Autocorrect plugin, and remember that signing up for a FREE API key gives you 14 days access to the TinyMCE Premium plugins, or you can purchase a Professional Plan to get started  with the best rich text editing features.

ConfigurationJavascriptTinyMCEPlugins
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 TinyMCE

    How to add drag and drop in your app’s rich text editor

    by Joe Robinson in How-to Use TinyMCE
Subscribe for the latest insights served straight to your inbox every month.

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
Tiny logo
Privacy Policy - Terms of Use© 2022 Tiny Technologies Inc.TinyMCE® and Tiny® are registered trademarks of Tiny Technologies, Inc.

Products

  • TinyMCE
  • Tiny Drive
  • Customer Stories
  • Pricing