Note: 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.
Cloud Installation
To enable the TinyMCE Enterprise Spellchecking plugin with Tiny Cloud:
- If configured, disable the
spellchecker
plugin provided with TinyMCE, by removing it from theplugins
list. - Add
tinymcespellchecker
to theplugins
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:
- If configured, disable the
spellchecker
plugin provided with TinyMCE, by removing it from theplugins
list. - Add
tinymcespellchecker
to theplugins
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.
Configuration 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.
- When set to
true
, thespellcheck
toolbar button will open a dialog that will step the user through each potential spelling error in the document. - When set to
false
, thespellcheck
toolbar button will enable or disable as-you-type spell checking and thespellcheckdialog
toolbar button will open the spell checker dialog.
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_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 version 5.9 or higher on Tiny Cloud.
Language | Code | Pre-packaged with TinyMCE 5.0+ | Supported Hunspell dictionaries (TinyMCE 5.9 or newer) |
---|---|---|---|
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: 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_on_load
Note: Removed in Spell Checker Pro 2.0 (TinyMCE 5.2). Spell Checker Pro will now always run on editor initialization. To disable Spell Checker Pro on load, use
spellchecker_active
.
This option runs the spellchecker when the contents of the editor is loaded.
Type: Boolean
Default Value: false
Possible Values: true
, false
Example: Using spellchecker_on_load
tinymce.init({
selector: 'textarea',
plugins: 'tinymcespellchecker',
spellchecker_on_load: true
});
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.
Note:
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
Note: This feature is only available for TinyMCE 5.9 and later. The
content_langs
option replaces thespellchecker_select_languages
option. The value of thespellchecker_select_languages
option, or its default, are used as a fallback forcontent_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:
- The
code
property is valid language tag, according to Tags for Identifying Languages (BCP47) - Either the
code
property is one of the Supported Languages or thecustomCode
override property is defined. - The
customCode
property is one of the Supported Languages if it is defined.
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' }
]
});
spellchecker_select_languages
Important: This option will be removed in TinyMCE 6.0.
Note: The
spellchecker_select_languages
option was deprecated with the release of TinyMCE 5.9. Thecontent_langs
option should be used instead. This change was made to allow more control over the way languages are specified, and to reflect that the option can be used outside of spell checking.
This option specifies the languages that can be set for content when working with multi-language content. The specified languages will be available from the language
toolbar drop-down menu button. For a list of available languages, see: Supported languages.
Type: comma-separated String
Default Value: 'en,es,fr,de,pt,zh'
Example: Using spellchecker_select_languages
tinymce.init({
selector: 'textarea',
plugins: 'tinymcespellchecker',
toolbar: 'language',
spellchecker_select_languages: 'en,es,fi,fr,da,de,nl,it,nb,pt,sv,zh'
});
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.
Note: Languages specified as keys in the
spellchecker_ignore_list
object must match the configured Spellchecker Languages.
Type: String[]
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
Note: This feature is only available for TinyMCE 5.7 and later.
tinymce.init({
selector: 'textarea',
plugins: 'tinymcespellchecker',
spellchecker_ignore_list: {
en_US: ['tinymce', 'TinyMCE'],
es: ['tinymce']
}
});
Toolbar buttons
The Spell Checker Pro plugin provides the following toolbar buttons:
Toolbar button identifier | Description |
---|---|
language | Sets the spellchecker language for the current selection. Note: For TinyMCE 5.9 and later, this is a core toolbar button. |
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
toolbar
configuration option. - The
quickbars_insert_toolbar
configuration option. - Custom Context toolbars.
Menu items
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:
- The
menu
configuration option. - The
contextmenu
configuration option. - Custom Menu toolbar buttons.
Commands
The Spell Checker Pro plugin provides the following commands.
Note: This feature is only available for TinyMCE 5.7 and later.
Command | Description |
---|---|
mceSpellcheckEnable | Turns spellchecking on. |
mceSpellcheckDisable | Turns spellchecking off. |
mceSpellcheckDialog | Opens the spellchecking dialog. |
mceSpellcheckDialogClose | Closes the spellchecking dialog. |
Example
tinymce.activeEditor.execCommand('mceSpellcheckEnable');
tinymce.activeEditor.execCommand('mceSpellcheckDisable');
tinymce.activeEditor.execCommand('mceSpellcheckDialog');
tinymce.activeEditor.execCommand('mceSpellcheckDialogClose');
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. Note: The language property is available for TinyMCE 5.10 and later. |
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 5.7 and later. |
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: function (editor) {
editor.on('SpellcheckerIgnore', function (e) {
console.log('Ignore word', e.word);
});
}
});
SpellcheckerIgnoreAll event
This event triggers when the user selects Ignore All on a misspelled word.
Note: The
language
property on the event is only available for TinyMCE 5.10 and later.
Example: The SpellcheckerIgnoreAll event
tinymce.init({
selector: 'textarea',
plugins: 'tinymcespellchecker',
toolbar: 'spellchecker',
init_instance_callback: function (editor) {
editor.on('SpellcheckerIgnoreAll', function (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: function (editor) {
editor.on('SpellcheckStart', function (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: function (editor) {
editor.on('SpellcheckEnd', function (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: function (editor) {
editor.on('SpellcheckError', function (e) {
console.log('Spelling service error: ' + e.message);
});
}
});
SpellcheckerLanguageChanged event
Note: This feature is only available for TinyMCE 5.7 and later.
This event fires when the spellchecking language is changed.
Example: The SpellcheckerLanguageChanged event
tinymce.init({
selector: 'textarea',
plugins: 'tinymcespellchecker',
toolbar: 'spellchecker',
init_instance_callback: function (editor) {
editor.on('SpellcheckerLanguageChanged', function (e) {
console.log('Spelling language changed: ' + e.language + '. Previous language: ' + e.prevLanguage);
});
}
});
APIs
The Spell Checker Pro plugin provides the following APIs.
Note: This feature is only available for TinyMCE 5.7 and later.
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 . |
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
Was this article helpful? Yes - No
Well, that's awkward . Would you mind opening an issue or helping us out?
Thanks for the feedback!
Can't find what you're looking for? Let us know.
Except as otherwise noted, the content of this page is licensed under the Creative Commons BY-NC-SA 3.0 License, and code samples are licensed under the Apache 2.0 License.