Spellcheckr

Spellcheckr is a JavaScript-based spellchecker that integrates into textarea tag. It provides a full spellchecker experience, and runs in one of two modes (or both):

Contextual - misspelled words are highlighted as the user types.
UI - misspelled words are highlighted in a separate UI when the user clicks the 'Spellcheck' button.

For contextual spellchecking, Spellcheckr provides a custom context menu for in-situ replacemet.

Spellcheckr has a dependency on jQuery.

Example 🔗

Thisexample is produced by the following code. Both contextual and UI-based error highlighting is enabled, and the UI preference is via popup dialog.

let sc = new Spellcheckr({
    field: '#my-textarea',
    mode: 'both',
    ui_display: 'dialog',
    dictionaries: {
        en: 'dictionary_en.txt'
    },
    lang: 'en',
    allow_storage: false
});

API 🔗

Spellcheckr defines a single function, a constructor, Spellcheckr, which must be instantiated. It expects a single parameter, params, of options:

field (string/object) - a jQuery selector or HTML element reference pointing to the textarea field you wish to give spellchecker functionality.
mode (string) - the mode Spellcheckr should run in, either:
- "contextual" - errors are highlighted as the user types, via red lines under words)
- "ui" - errors are highlighted in a UI later, when the user clicks the "Spellcheck" button
- "both" - both of the above (default).
ui (string) - the type of interface to use when the "ui" mode (see mode) is used. Either:
- "dialog" - the UI will be via dialog popup (default)
- "inline" - the UI will be inline, underneath the field
prevent_submit (bool) - if the field is in a form and this parameter is set to true, submission of the form will be suppressed until spelling errors are resolved.
allow_storage (bool) - whether to allow Spellcheckr to cache the contents of dictionary files in Local Storage, for better performance. Defaults to true.
allow_add_word (bool) - whether to allow users to add words marked as misspelled to a "my words" dictionary, so those words will not be flagged as misspelled on future checks. (These are stored in Local Storage, and so persist across page loads.) Defaults to true.
allow_other (bool) - whether to allow users to specify their own corrections to words marked as misspelled, i.e. rather than one of the replacement words Spellcheckr suggests. Defaults to true.
lang (string) - the default language (and corresponding dictionary file) to use.
dictionaries (object) - an object of language tokens (keys) and dictionary file URIs (values) to use with Spellcheckr. See Languages. If more than one language is specified, a dropdown allowing users to switch language is provided, defaulting to the language denoted by lang.
labels (object) - an optional object of overrides for the various labels and messages Spellcheckr's UI contains. This is useful for localising Spellcheckr for use with non-English languages. See Languages.

Languages 🔗

Spellcheckris powered by dictionary files. It ships with an English dictionary file, and other languages can be supported by creating or sourcing similar files for those languages.

Dictionary files take the form of pipe-separated words, i.e. WORD|WORD2|WORD3 etc.

You can also customise the language of the Spellcheckr interface itself, by passing in custom labels via the labels parameter.

Takentogether, let's say we wanted to use Spellcheckr on a Russian website, and we had sourced a Russian dictionary file that lived at russian.txt:

let sc = new Spellcheckr({
    field: '#my-textarea',
    dictionaries: {
        RU: 'russian.txt'
    },
    labels: {
        replace_with: "???????? ?..."
        //more label overrides here...
    }
});

The full list of overridable labels is as follows:

start - the text for the button that launches the UI (see the mode param), i.e. starts a manual spellcheck. Default: "Spellcheck".
intro - the word that precedes the misspelled word in a UI-based spellcheck. Default: "Unrecognised," e.g. "Unrecognised, "foo"".
replace_with - the placeholder for the dropdown of replacement suggestions. Default: "Replace with..."
change - the text for the "change" button, to change a misspelled word to a selected replacement. Default: "Change".
change_all - as with change, but for changing all instances of the misspelled word. Default: "Change all".
ignore - the text for the button to ignore a word flagged as misspelled. Default: "Ignore".
ignore_all - as with ignore, but for all instances of the word. Default: "Ignore all".
add - the text for the button to add a word flagged as misspelled to the user's personal dictionary. Default: "Add to my words".
restart - the text for the button to restart the manual spellcheck. Default: "Restart".
specify - the text for option in the replacements dropdown to allow the user to specify their own, custom replacement (if this is allowed). Default: "...other (specify)".
no_suggestions - the text that displays when Spellcheckr did not find any suggested replacements for a word flagged as misspelled. Default: "No suggestions".

Download Download from Github

Did I help you? Feel free to be amazing and buy me a coffee on Ko-fi!