🐌 Spellcheck your CodeMirror editor in style with the dictionary of your choice
Browser inclusion - Include
lib/codemirror-typo.min.js into your
This is a minified version of
codemirror-typo, bundled using browserify.
Working in Node - Install it as a dependency:
$ npm install --save codemirror-typo
lib/codemirror-typo.min.css into your
var codeMirrorTypo = ;
In the browser, it is registered through adding the
Now just plug and play!
var cm = ; // your CodeMirror instance;
CodeMirorrinstance to overlay spellchecker
string- dictionary language
object- optional, either a
stringpath to dictionary files or an options object
There are now red highlighted overlays on words not recognized by the dictionary. Upon focus, gutter marks provide a menu of suggestions of close matches from dictionary for easy fixing.
codemirror-typo uses typo-js that makes use of Hunspell dictionaries, a popular open-source dictionary framework used by Firefox, Google Chrome, LibreOffice and more. These consist of a
*.dic file of words and a
*.aff of various spelling rules.
See below for a list of Hunspell dictionary repos for downloading
Dictionary Path Options
lang looks for
; // for files in dictionary/en_US/
Note that this is a relative path.
lang and a path
string looks for
The path can be relative, absolute, or an external web address:
Options Object Parameters
codemirror-typo follows this schema when looking for dictionary files:
dictPath: 'dictionary/' + lang // replaced by options parameter if stringdictFolder: '' // optional subdirectory of dictPathfilename: '' // name of both aff and dic fileaffFile: lang // name of aff file, overrides filenamedicFile: lang // name of dic file, overrides filenametypoClass: 'typo' // CSS class applied to all spelling errors,// will be prefixed with 'cm-'typoCSS: 'background: rgba(255,0,0,.25)' // CSS applied to typoClassgutterClass: 'typoFlags' // CSS class and name of CodeMirror guttergutterMarkClass: 'typoMark' // CSS class of gutter markers
dictPath may be an absolute or relative directory path, or a web address, with or without a trailing
The gutter markers and spelling suggestions are very much in beta. They're functional but definitely need improvement. Suggestions, issues & PR's welcome!
- Long load time for spelling suggestion menu, especially if word is not in dictionary. The menu should render as it's generated, but it is waiting until the whole element exists before rendering it...
- Gutter marks: they don't load in as soon as the CodeMirror instance does, and they don't work on lines currently being written.
- dictionary path configuration options
- gutter mark typos
- context menu spelling suggestions
- make and host a demo
- better browser compatibility
- general code cleanup
- cache an ignore word list aka "Add to dictionary"
- add devTool for auto-downloading dictionaries
MIT © Robert Pirtle