Skip to content

introduction-to-tiny-spellchecker.adoc

Latest commit

 

History

History
274 lines (201 loc) · 7.4 KB

introduction-to-tiny-spellchecker.adoc

File metadata and controls

274 lines (201 loc) · 7.4 KB

Spell Checker plugin

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

Interactive example

liveDemo::spellchecker[]

Cloud Installation

To enable the {productname} Enterprise Spellchecking plugin with {cloudname}, add tinymcespellchecker to the plugins list.

With {cloudname} 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-US'  // Note: Using RFC5646 format with hyphen
});

Self-hosted Installation

To enable the {productname} Enterprise Spellchecking plugin, add tinymcespellchecker to the plugins list.

For information on installing the server-side component for spell checking, please see the Deploy the {productname} spelling service server-side component using Docker.

Example: TinyMCE Self-hosted Installation

tinymce.init({
  selector: 'textarea',
  plugins: 'tinymcespellchecker',
  spellchecker_rpc_url: 'localhost/ephox-spelling',
  spellchecker_language: 'en-US'  // Note: Using RFC5646 format with hyphen
});

Usage

The {productname} 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.

Commands

The Spell Checker plugin provides the following commands.

Events

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 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 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.

Note
 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 (using RFC5646 format, e.g., 'en-US', 'es-ES').

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.