Spell Checker Pro plugin

This plugin is only available for paid TinyMCE subscriptions.

Spell Checker Pro adds spell checking as-you-type capabilities to TinyMCE. For information on the supported languages, refer to this section.

Interactive example

  • TinyMCE

  • HTML

  • JS

  • Edit on CodePen

<textarea id="spellcheckerpro">
  <h1><span lang="en">The Hare and the Tortoise</span></h1>
  <p><span lang="en">A HARE one day riddiculed the short feet and slow pace of the Tortoise, who replied, laughing: &ldquo;Though you be swift as the wind, I will beeat you in a race.&rdquo; The Hare, beleiving her assertion to be simply impossable, assented to the proposal; and they agreed that the Fox should choose the course and fix the gaol. On the day appointed for the race the two started together. The Tortoise never for a momment stopped, but went on with a slow but steady pace straight to the end of the corse. The Hare, lying down by the wayside, fell fast asleep. At last waking up, and moving as fast as he could, he saw the Tortoise had reached the goal, and was comfortably dozzing after her fatigue.</span></p>
  <p><span lang="en">Slow but steady wins the race.</span></p>
  <h1><span lang="es">La liebre y la tortuga</span></h1>
  <p><span lang="es">Un d&iacute;a, una liebre ridiculiz&oacute; los pies cortos y el ritmo lento de la tortuga, quien respondi&oacute; riendo: "Aunque seas veloz como el viento, te vencer&eacute; en una carrera". La Liebre, creyendo que su afirmaci&oacute;n era simplemente imposible, asinti&oacute; a la propuesta; y acordaron que Fox deber&iacute;a elegir el curso y fijar el objetivo. El d&iacute;a designado para la carrera, los dos comenzaron juntos. La Tortuga nunca se detuvo por un momento, sino que continu&oacute; con un ritmo lento pero constante hasta el final del curso. La Liebre, acostada en el camino, se qued&oacute; profundamente dormida. Al despertarse y moverse lo m&aacute;s r&aacute;pido que pudo, vio que la Tortuga hab&iacute;a alcanzado la meta y dormitaba c&oacute;modamente despu&eacute;s de su fatiga.</span></p>
  <p><span lang="es">Lento pero constante gana la carrera.</span></p>
  <h1><span lang="de">Der Hase und die Schildkr&ouml;te</span></h1>
  <p><span lang="de">Eines Tages hat ein Hase die kurzen F&uuml;&szlig;e und das langsame Tempo der Schildkr&ouml;te beseitigt, die lachend antwortete: "Obwohl du so schnell wie der Wind bist, werde ich dich in einem Rennen schlagen." Der Hase, der glaubte, ihre Behauptung sei einfach unm&ouml;glich, stimmte dem Vorschlag zu; und sie waren sich einig, dass der Fuchs den Kurs w&auml;hlen und das Gef&auml;ngnis reparieren sollte. An dem f&uuml;r das Rennen festgelegten Tag starteten die beiden zusammen. Die Schildkr&ouml;te h&ouml;rte nie f&uuml;r einen Moment auf, sondern ging mit einem langsamen, aber stetigen Tempo direkt bis zum Ende der Leiche weiter. Der Hase, der auf der Strecke lag, schlief fest ein. Als er endlich aufwachte und sich so schnell er konnte bewegte, sah er, dass die Schildkr&ouml;te das Ziel erreicht hatte und nach ihrer M&uuml;digkeit bequem d&ouml;ste.</span></p>
  <p><span lang="de">Langsam aber stetig gewinnt das Rennen.</span></p>
  <p>&nbsp;</p>
  <p><strong>Based on:</strong> Aesop, 'Aesop&rsquo;s Fables: The Hare and the Tortoise', <a href="https://www.gutenberg.org/files/21/21-h/21-h.htm#link2H_4_0018" target="_blank" rel="noopener">https://www.gutenberg.org/files/21/21-h/21-h.htm#link2H_4_0018</a></p>
  <p><em>Translations provided by <a href="https://translate.google.com/">Google Translate</a>.</em></p>
</textarea>
tinymce.init({
  selector: 'textarea#spellcheckerpro',
  plugins: 'code tinymcespellchecker link',
  toolbar: 'spellchecker language spellcheckdialog',
  height: 500,
  spellchecker_language: 'en',
  content_langs: [
    { title: 'English (US)', code: 'en_US' },
    { title: 'English (US Medical)', code: 'en_US', customCode: 'en_US-medical' },
    { title: 'English (UK)', code: 'en_UK' },
    { title: 'English (UK Medical)', code: 'en_UK', customCode: 'en_UK-medical' },
    { title: 'Spanish', code: 'es' },
    { title: 'French', code: 'fr' },
    { title: 'German', code: 'de' },
    { title: 'Portuguese', code: 'pt' },
    { title: 'Chinese', code: 'zh' }
  ],
  content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }'
});

Cloud Installation

To enable the TinyMCE Enterprise Spellchecking plugin with Tiny Cloud, add tinymcespellchecker to the plugins list.

With Tiny Cloud the server-side spellchecking component is automatically configured, so the spellchecker_rpc_url parameter does not need to be set.

Example: TinyMCE Cloud Installation

tinymce.init({
  selector: 'textarea',
  plugins: 'tinymcespellchecker',
  spellchecker_language: 'en'
});

Self-hosted Installation

To enable the TinyMCE Enterprise Spellchecking plugin, add tinymcespellchecker to the plugins list.

For information on installing the server-side component for spell checking, please see the server-side component installation guide.

Example: TinyMCE Self-hosted Installation

tinymce.init({
  selector: 'textarea',
  plugins: 'tinymcespellchecker',
  spellchecker_rpc_url: 'localhost/ephox-spelling',
  spellchecker_language: 'en'
});

Usage

The TinyMCE Enterprise Spellchecking plugin activates automatically when users type content into the editor. To select a spelling suggestion for a misspelled word, right-click the misspelled word to open the contextual menu.

Options

spellchecker_active

This option enables or disables the spell checker when the editor is loaded. When set to false, the spellchecker will not be active when the editor is initialized. The toolbar button or the menu item will have to be selected by the user to start the spell checker.

Type: Boolean

Default value: true

Possible values: true, false

Example: using spellchecker_active

tinymce.init({
  selector: 'textarea',
  plugins: 'tinymcespellchecker',
  spellchecker_active: true
});

spellchecker_dialog

This option specifies the primary spell checking mode.

Type: Boolean

Default value: false

Possible values: true, false

Example: using spellchecker_dialog

tinymce.init({
  selector: 'textarea',
  plugins: 'tinymcespellchecker',
  toolbar: 'spellchecker',
  spellchecker_dialog: true
});

spellchecker_ignore_list

This option specifies which words should be ignored by the spell checker. If an array of words is provided, the specified words will be ignored for all languages. If an object containing an array of words per language is provided, the specified words will be ignored for the specified languages.

Languages specified as keys in the spellchecker_ignore_list object must match the configured Spellchecker Languages.

Type: Array or Object

Example: using spellchecker_ignore_list to ignore words in all languages

tinymce.init({
  selector: 'textarea',
  plugins: 'tinymcespellchecker',
  spellchecker_ignore_list: [ 'tinymce', 'TinyMCE' ]
});

Example: using spellchecker_ignore_list for specific languages

tinymce.init({
  selector: 'textarea',
  plugins: 'tinymcespellchecker',
  spellchecker_ignore_list: {
    en_US: [ 'tinymce', 'TinyMCE' ],
    es: [ 'tinymce' ]
  }
});

spellchecker_language

This option specifies the default language used by Spell Checker Pro.

Type: String

Default value: 'en_US'

Example: using spellchecker_language

tinymce.init({
  selector: 'textarea',
  plugins: 'tinymcespellchecker',
  spellchecker_language: 'de'
});

Supported languages

The following languages are supported for the Spell Checker Pro plugin. All of the listed languages are supported for customers using TinyMCE on Tiny Cloud.

Language Code Pre-packaged with TinyMCE Supported Hunspell dictionaries

Afrikaans (South Africa)

af_ZA

English (Australia)

en_AU

English (Canada)

en_CA

English (United Kingdom)

en_GB, en_UK, en_BR

English (United States)

en, en_US

Medical English (US)

en_US-medical

Medical English (UK)

en_GB-medical

Danish

da

Dutch

nl

Finnish

fi

French

fr

German

de

Hungarian

hu

Italian

it

Maori (New Zealand)

mi_NZ

Norwegian Bokmål

nb

Norwegian Nynorsk

nn

Polish

pl

Portuguese (Brazil)

pt

Portuguese (Portugal)

pt_PT

Spanish

es

Swedish

sv

Swedish (Finland)

sv_FI

spellchecker_languages

This option specifies the spellchecker languages that are available to the user, provided as a comma delimited string. For a list of available languages, see: Supported languages.

Type: A comma-separated string.

Default value:

'English (United States)=en_US,English (United Kingdom)=en_GB,Danish=da,Dutch=nl,Finnish=fi,French=fr,German=de,Italian=it,Norwegian=nb,Portuguese=pt,Portuguese (Portugal)=pt_PT,Spanish=es,Swedish=sv'

Example: using spellchecker_languages

tinymce.init({
  selector: 'textarea',
  plugins: 'tinymcespellchecker',
  spellchecker_languages: 'US English=en_US,UK English=en_GB,Danish=da,Dutch=nl,Finnish=fi,French=fr,German=de,Italian=it,Norwegian=nb,Brazilian Portuguese=pt,Iberian Portuguese=pt_PT,Spanish=es,Swedish=sv'
});

spellchecker_rpc_url

This option specifies the URL of the server-side ephox-spelling service. For instructions on how to set up a Spell Checker Pro server-side component, see: the server-side component installation guide.

spellchecker_rpc_url is not required when enabling this plugin via Tiny Cloud

Type: String

Example: using spellchecker_rpc_url

tinymce.init({
  selector: 'textarea',
  plugins: 'tinymcespellchecker',
  spellchecker_rpc_url: 'localhost/ephox-spelling'
});

content_langs

This option sets the languages displayed in the language toolbar button and the language menu item. The option accepts an array of language specs. Each language spec is a JavaScript object defined using the following properties.

Name Type Requirement Description

title

String

required

The name shown for this language in the UI.

code

String

required

The language tag, as defined in Tags for Identifying Languages (BCP47), for this language. This language tag is placed in the lang attribute for elements formatted using this language.

customCode

String

optional

An alternative language tag, that does not need to be compatible with BCP47. This string is placed in the data-mce-lang attribute for elements formatted using this language, if it is defined.

Type: Array

Example: using content_langs to change spelling dictionaries

The Spell Checker Pro plugin will use the code property to determine which dictionary to use on the content, unless the customCode property is available. The language tag specified by customCode overrides the spelling dictionary, to allow for non-standard languages such as the medical dictionaries provided with Spell Checker Pro. For all languages, ensure that:

For example:

tinymce.init({
  selector: 'textarea', // change this according to your HTML
  toolbar: 'language',
  plugins: 'tinymcespellchecker',
  content_langs: [
    { title: 'English (US)', code: 'en_US' },
    { title: 'English (US Medical)', code: 'en_US', customCode: 'en_US-medical' },
    { title: 'English (UK)', code: 'en_UK' },
    { title: 'English (UK Medical)', code: 'en_UK', customCode: 'en_UK-medical' },
    { title: 'Spanish', code: 'es' },
    { title: 'French', code: 'fr' },
    { title: 'German', code: 'de' },
    { title: 'Portuguese', code: 'pt' },
    { title: 'Chinese', code: 'zh' }
  ]
});

Toolbar buttons

The Spell Checker Pro plugin provides the following toolbar buttons:

Toolbar button identifier Description

spellcheckdialog

Opens the spelling checker dialog if spellchecker_dialog is false, otherwise this button is disabled.

spellchecker

Opens the spelling checker dialog if spellchecker_dialog is true, otherwise this button enables or disables spell checking as-you-type.

These toolbar buttons can be added to the editor using:

The Spell Checker Pro plugin provides the following menu items:

Menu item identifier Default Menu Location Description

spellchecker

Tools

Toggles the spellchecker on/off.

spellcheckerlanguage

Tools

Changes the language used for the spell checking process for the document or the currently selected text.

These menu items can be added to the editor using:

Commands

The Spell Checker Pro plugin provides the following commands.

Command Description

mceSpellcheckEnable

Turns spellchecking on.

mceSpellcheckDisable

Turns spellchecking off.

mceSpellcheckDialog

Opens the spellchecking dialog.

mceSpellcheckDialogClose

Closes the spellchecking dialog.

NOTE: This feature is only available for TinyMCE 6.5 and later.

mceSpellcheckUpdate

Checks the editor content for new misspellings, highlights them, and offers spelling suggestions.

Example
tinymce.activeEditor.execCommand('mceSpellcheckEnable');
tinymce.activeEditor.execCommand('mceSpellcheckDisable');
tinymce.activeEditor.execCommand('mceSpellcheckDialog');
tinymce.activeEditor.execCommand('mceSpellcheckDialogClose');
tinymce.activeEditor.execCommand('mceSpellcheckUpdate');

Events

The following events are provided by the Spell Checker Pro plugin.

Name Data Description

SpellcheckerIgnore

{ word: string }

Fired when a single instance of a word has been marked as ignored.

SpellcheckerIgnoreAll

{ word: string, language: string }

Fired when all instances of a word (in a certain language) have been marked as ignored.

SpellcheckError

{ message: string }

Fired when a spellchecker error occurs, such as when the Spell Checker Pro service can’t be reached.

SpellcheckStart

N/A

Fired when spellchecking is enabled.

SpellcheckEnd

N/A

Fired when spellchecking is disabled.

SpellcheckerLanguageChanged

{ language: string, prevLanguage: string }

Fired when the spellchecking language is changed.

NOTE: This feature is only available for TinyMCE 6.5 and later.

SpellcheckerUpdated

{ spelling: SpellingUpdate }

Fired when the editor content is checked for misspellings, and includes suggestions within the spelling object.

SpellcheckerIgnore event

This event triggers when the user selects Ignore on a misspelled word.

Example: the SpellcheckerIgnore event

tinymce.init({
  selector: 'textarea',
  plugins: 'tinymcespellchecker',
  toolbar: 'spellchecker',
  init_instance_callback: (editor) => {
    editor.on('SpellcheckerIgnore', (e) => {
      console.log('Ignore word', e.word);
    });
  }
});

SpellcheckerIgnoreAll event

This event triggers when the user selects Ignore All on a misspelled word.

Example: the SpellcheckerIgnoreAll event

tinymce.init({
  selector: 'textarea',
  plugins: 'tinymcespellchecker',
  toolbar: 'spellchecker',
  init_instance_callback: (editor) => {
    editor.on('SpellcheckerIgnoreAll', (e) => {
      console.log('Ignore word (all)', e.word, e.language);
    });
  }
});

SpellcheckStart event

This event triggers when the user enables the spellchecker.

Example: the SpellcheckStart event

tinymce.init({
  selector: 'textarea',
  plugins: 'tinymcespellchecker',
  toolbar: 'spellchecker',
  init_instance_callback: (editor) => {
    editor.on('SpellcheckStart', (e) => {
      console.log('Started spellchecking');
    });
  }
});

SpellcheckEnd event

This event triggers when the user disables the spellchecker.

Example: the SpellcheckEnd event

tinymce.init({
  selector: 'textarea',
  plugins: 'tinymcespellchecker',
  toolbar: 'spellchecker',
  init_instance_callback: (editor) => {
    editor.on('SpellcheckEnd', (e) => {
      console.log('Stopped spellchecking');
    });
  }
});

SpellcheckError event

This event triggers when a spellchecker error occurs, such as the Spell Checker Pro service can’t be reached.

Example: the SpellcheckError event

tinymce.init({
  selector: 'textarea',
  plugins: 'tinymcespellchecker',
  toolbar: 'spellchecker',
  init_instance_callback: (editor) => {
    editor.on('SpellcheckError', (e) => {
      console.log('Spelling service error: ' + e.message);
    });
  }
});

SpellcheckerLanguageChanged event

This event fires when the spellchecking language is changed.

Example: the SpellcheckerLanguageChanged event

tinymce.init({
  selector: 'textarea',
  plugins: 'tinymcespellchecker',
  toolbar: 'spellchecker',
  init_instance_callback: (editor) => {
    editor.on('SpellcheckerLanguageChanged', (e) => {
      console.log(`Spelling language changed: ${e.language}. Previous language: ${e.prevLanguage}`);
    });
  }
});

SpellcheckerUpdated Event

This feature is only available for TinyMCE 6.5 and later.

This event is fired when the editor content is checked for misspellings and suggestions, either by opening the Spell Checker Pro dialog, or by executing the mceSpellcheckUpdate command.

This event is not fired when SpellChecker Pro is operating in As-You-Type mode.

Example: the SpellcheckerLanguageChanged event

tinymce.init({
  selector: 'textarea',
  plugins: 'tinymcespellchecker',
  toolbar: 'spellchecker',
  init_instance_callback: (editor) => {
    editor.on('SpellcheckerUpdated', (e) => {
      const spelling = e.spelling;
      for (const [ language, words ] of Object.entries(spelling)) {
        for (const [ word, suggestions ] of Object.entries(words)) {
          console.log(`${language} suggestions for ${word}:`, suggestions);
        }
      }
    });
  }
});

The spelling object

The spelling object, which is provided by the SpellcheckerUpdated event, contains the result of the spelling service spellcheck.

The keys of the outermost object are the language code for each checked language.

Under each returned language code is an object with

  • keys representing misspelled words; and

  • arrays of values that are possible correct spellings.

Example: the spelling object
spelling: {
  en: {
    riddiculed: [ 'ridiculed', 'ridicule' ],
    impossable: [ 'impossible', 'impassable', 'impassible' ]
  },
  es: {
    impossible: [ 'impasible', 'imposible', 'imposibles', 'imposibilite' ],
    designate: [ 'desnate', 'designativo', 'designa-te', 'designare' ],
    moment: [ 'momento', 'momentito', 'omento', 'memento' ]
  }
}

APIs

The Spell Checker Pro plugin provides the following APIs.

Name Arguments Description

addIgnoredWords

words: string[], lang?: string

Add an array of words to the spellchecker_ignore_list for a specific language. Add the array of words to all languages by omitting the lang parameter.

getLanguage

N/A

Get the current language enabled for spellchecking.

setLanguage

language: string

Set the current language for spellchecking. This must be a supported language code (case-sensitive). For a list of supported languages, see: Spell Checker Pro - Supported languages.

NOTE: This feature is only available for TinyMCE 6.5 and later.

getSpellingErrors

N/A

Returns an array of objects representing each existing misspelled word in the editor content, with each object using the keys language and word.

Examples
// ignore words for all languages
tinymce.activeEditor.plugins.tinymcespellchecker.addIgnoredWords(['tinymce']);

// ignore words for a specific language
tinymce.activeEditor.plugins.tinymcespellchecker.addIgnoredWords(['TinyMCE', 'tinymce'], 'en_us');

// get the current language used for spellchecking
tinymce.activeEditor.plugins.tinymcespellchecker.getLanguage();

// set the current language to a specific language
tinymce.activeEditor.plugins.tinymcespellchecker.setLanguage('sv');  // e.g. Swedish

// retrieve all the misspelled words in the editor
tinymce.activeEditor.plugins.tinymcespellchecker.getSpellingErrors();