Spell Checker plugin
This plugin is only available for paid TinyMCE subscriptions. |
Spell Checker 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="spellchecker">
<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: “Though you be swift as the wind, I will beeat you in a race.” 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ía, una liebre ridiculizó los pies cortos y el ritmo lento de la tortuga, quien respondió riendo: "Aunque seas veloz como el viento, te venceré en una carrera". La Liebre, creyendo que su afirmación era simplemente imposible, asintió a la propuesta; y acordaron que Fox debería elegir el curso y fijar el objetivo. El día designado para la carrera, los dos comenzaron juntos. La Tortuga nunca se detuvo por un momento, sino que continuó con un ritmo lento pero constante hasta el final del curso. La Liebre, acostada en el camino, se quedó profundamente dormida. Al despertarse y moverse lo más rápido que pudo, vio que la Tortuga había alcanzado la meta y dormitaba cómodamente despué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öte</span></h1>
<p><span lang="de">Eines Tages hat ein Hase die kurzen Füße und das langsame Tempo der Schildkrö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öglich, stimmte dem Vorschlag zu; und sie waren sich einig, dass der Fuchs den Kurs wählen und das Gefängnis reparieren sollte. An dem für das Rennen festgelegten Tag starteten die beiden zusammen. Die Schildkröte hörte nie fü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öte das Ziel erreicht hatte und nach ihrer Müdigkeit bequem döste.</span></p>
<p><span lang="de">Langsam aber stetig gewinnt das Rennen.</span></p>
<p> </p>
<p><strong>Based on:</strong> Aesop, 'Aesop’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#spellchecker',
plugins: 'code tinymcespellchecker link',
toolbar: 'spellchecker language spellcheckdialog',
height: 500,
spellchecker_language: 'en_US',
content_langs: [
{ title: 'Afrikaans (South Africa)', code: 'af_ZA', customCode: 'af_ZA' },
{ title: 'English (Australia)', code: 'en_AU' },
{ title: 'English (Canada)', code: 'en_CA' },
{ title: 'English (United Kingdom)', code: 'en_GB' },
{ title: 'English (United States)', code: 'en_US' },
{ title: 'Medical English (US)', code: 'en_US', customCode: 'en_US-medical' },
{ title: 'Medical English (UK)', code: 'en_GB', customCode: 'en_GB-medical' },
{ title: 'Danish', code: 'da' },
{ title: 'Dutch', code: 'nl_NL' },
{ title: 'Finnish', code: 'fi' },
{ title: 'French', code: 'fr' },
{ title: 'German', code: 'de_DE' },
{ title: 'Hungarian', code: 'hu' },
{ title: 'Italian', code: 'it_IT' },
{ title: 'Maori (New Zealand)', code: 'mi_NZ' },
{ title: 'Norwegian Bokmål', code: 'nb_NO' },
{ title: 'Norwegian Nynorsk', code: 'nn' },
{ title: 'Polish', code: 'pl' },
{ title: 'Portuguese (Brazil)', code: 'pt_BR' },
{ title: 'Portuguese (Portugal)', code: 'pt_PT' },
{ title: 'Spanish', code: 'es' },
{ title: 'Swedish', code: 'sv_SE' },
{ title: 'Swedish (Finland)', code: 'sv_FI' }
],
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.
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.
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
spellchecker_dialog
This option specifies the primary spell checking mode.
-
When set to
true
, thespellchecker
toolbar button will open a dialog that will step the user through each potential spelling error in the document. -
When set to
false
, thespellchecker
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
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
spellchecker_language
This option specifies the default language used by Spell Checker.
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 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-medical, en_US-medical |
✔ |
✔ |
Medical English (UK) |
en_GB-medical |
✔ |
✖ |
Danish |
da |
✔ |
✔ |
Dutch |
nl, nl_NL |
✔ |
✔ |
Finnish |
fi |
✔ |
✖ |
French |
fr |
✔ |
✔ |
German |
de, de_DE |
✔ |
✔ |
Hungarian |
hu |
✖ |
✔ |
Italian |
it, it_IT |
✔ |
✔ |
Maori (New Zealand) |
mi_NZ |
✖ |
✔ |
Norwegian Bokmål |
nb, nb_NO |
✔ |
✔ |
Norwegian Nynorsk |
nn |
✖ |
✔ |
Polish |
pl |
✖ |
✔ |
Portuguese (Brazil) |
pt, pt_BR |
✔ |
✔ |
Portuguese (Portugal) |
pt_PT |
✔ |
✔ |
Spanish |
es |
✔ |
✔ |
Swedish |
sv, sv_SE |
✔ |
✔ |
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 Bokmål=nb_NO,Norwegian Nynorsk=nn,Brazilian Portuguese=pt_BR,Portuguese=pt,Portuguese (Portugal)=pt_PT,Spanish=es,Swedish=sv,Swedish (Finland)=sv_FI,Afrikaans (South Africa)=af_ZA,English (Australia)=en_AU,English (Canada)=en_CA,English (United Kingdom)=en_GB,English (United States)=en_US,Medical English (US)=en_US-medical,Medical English (UK)=en_GB-medical,Maori (New Zealand)=mi_NZ'
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 Bokmål=nb_NO,Norwegian Nynorsk=nn,Brazilian Portuguese=pt_BR,Portuguese=pt,Portuguese (Portugal)=pt_PT,Spanish=es,Swedish=sv,Swedish (Finland)=sv_FI,Afrikaans (South Africa)=af_ZA,English (Australia)=en_AU,English (Canada)=en_CA,English (United Kingdom)=en_GB,English (United States)=en_US,Medical English (US)=en_US-medical,Medical English (UK)=en_GB-medical,Maori (New Zealand)=mi_NZ'
});
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 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
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 |
---|---|---|---|
|
String |
required |
The name shown for this language in the UI. |
|
String |
required |
The language tag, as defined in Tags for Identifying Languages (BCP47), for this language. This language tag is placed in the |
|
String |
optional |
An alternative language tag, that does not need to be compatible with BCP47. This string is placed in the |
Type: Array
Example: using content_langs
to change spelling dictionaries
The Spell Checker 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. 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',
toolbar: 'language',
plugins: 'tinymcespellchecker',
content_langs: [
{ title: 'Afrikaans (South Africa)', code: 'af_ZA', customCode: 'af_ZA' },
{ title: 'English (Australia)', code: 'en_AU' },
{ title: 'English (Canada)', code: 'en_CA' },
{ title: 'English (United Kingdom)', code: 'en_GB' },
{ title: 'English (United States)', code: 'en_US' },
{ title: 'Medical English (US)', code: 'en_US', customCode: 'en_US-medical' },
{ title: 'Medical English (UK)', code: 'en_GB', customCode: 'en_GB-medical' },
{ title: 'Danish', code: 'da' },
{ title: 'Dutch', code: 'nl_NL' },
{ title: 'Finnish', code: 'fi' },
{ title: 'French', code: 'fr' },
{ title: 'German', code: 'de_DE' },
{ title: 'Hungarian', code: 'hu' },
{ title: 'Italian', code: 'it_IT' },
{ title: 'Maori (New Zealand)', code: 'mi_NZ' },
{ title: 'Norwegian Bokmål', code: 'nb_NO' },
{ title: 'Norwegian Nynorsk', code: 'nn' },
{ title: 'Polish', code: 'pl' },
{ title: 'Portuguese (Brazil)', code: 'pt_BR' },
{ title: 'Portuguese (Portugal)', code: 'pt_PT' },
{ title: 'Spanish', code: 'es' },
{ title: 'Swedish', code: 'sv_SE' },
{ title: 'Swedish (Finland)', code: 'sv_FI' }
],
});
Toolbar buttons
The Spell Checker plugin provides the following toolbar buttons:
Toolbar button identifier | Description |
---|---|
|
Opens the spelling checker dialog if |
|
Opens the spelling checker dialog if |
These toolbar buttons can be added to the editor using:
-
The
toolbar
configuration option. -
The
quickbars_insert_toolbar
configuration option.
Menu items
The Spell Checker plugin provides the following menu items:
Menu item identifier | Default Menu Location | Description |
---|---|---|
|
Tools |
Toggles the spellchecker on/off. |
|
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.
Commands
The Spell Checker 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. |
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 plugin.
Name | Data | Description |
---|---|---|
SpellcheckerIgnore |
|
Fired when a single instance of a word has been marked as ignored. |
SpellcheckerIgnoreAll |
|
Fired when all instances of a word (in a certain language) have been marked as ignored. |
SpellcheckError |
|
Fired when a spellchecker error occurs, such as when the Spell Checker service can’t be reached. |
SpellcheckStart |
N/A |
Fired when spellchecking is enabled. |
SpellcheckEnd |
N/A |
Fired when spellchecking is disabled. |
SpellcheckerLanguageChanged |
|
Fired when the spellchecking language is changed. |
NOTE: This feature is only available for TinyMCE 6.5 and later. |
||
SpellcheckerUpdated |
|
Fired when the editor content is checked for misspellings, and includes suggestions within the |
SpellcheckerIgnoreAll event
This event triggers when the user selects Ignore All on a misspelled word.
SpellcheckError event
This event triggers when a spellchecker error occurs, such as the Spell Checker service can’t be reached.
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 dialog, or by executing the mceSpellcheckUpdate
command.
This event is not fired when Spell Checker 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 plugin provides the following APIs.
Name | Arguments | Description |
---|---|---|
addIgnoredWords |
words: |
Add an array of words to the |
getLanguage |
N/A |
Get the current language enabled for spellchecking. |
setLanguage |
language: |
Set the current language for spellchecking. This must be a supported language code (case-sensitive). For a list of supported languages, see: Spell Checker - |
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 |
// 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();