Spellcheck your CodeMirror editor in style with the dictionary of your choice
MIT License
🐌 Spellcheck your CodeMirror editor in style with the dictionary of your choice
Browser inclusion - Include lib/codemirror-typo.min.js
into your head
:
<script src='codemirror-typo.min.js'></script>
This is a minified version of codemirror-typo
, bundled using browserify.
Working in Node - Install it as a dependency:
$ npm install --save codemirror-typo
Locate a Hunspell dictionary you'd like to use. You'll need a *.aff
and *.dic
for your spellcheck language. Below, there is more dictionary information, and a list of where to get dictionaries.
Load lib/codemirror-typo.min.css
into your head
:
<style rel='stylesheet' href='codemirror-typo.min.css'></style>
Register codeMirrorTypo
:
In Node, require
it:
var codeMirrorTypo = require('codemirror-typo');
In the browser, it is registered through adding the lib/codemirror.min.js
script.
Now just plug and play!
var cm = CodeMirror(document.body); // your CodeMirror instance
codeMirrorTypo(cm, lang[, options]);
cm
- CodeMirorr
instance to overlay spellcheckerlang
- string
- dictionary languageoptions
- string
or object
- optional, either a string
path to dictionary files or an options objectThere 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 aff
and dic
files.
No Path:
Passing just lang
looks for dictionary/lang/lang.aff
& dictionary/lang/lang.dic
:
codeMirrorTypo(cm, 'en_US'); // for files in dictionary/en_US/
Note that this is a relative path.
String Path:
Passing lang
and a path string
looks for path/lang.aff
, path/lang.dic
:
codeMirrorTypo(cm, 'en_US', 'path/to/dictionary');
The path can be relative, absolute, or an external web address:
codeMirrorTypo(cm, 'German', 'https://cdn.rawgit.com/titoBouzout/Dictionaries/master/');
codemirror-typo
follows this schema when looking for dictionary files:
dictPath
/dictFolder
/[affFile
.aff,arrFile
.dic]
Defaults
{
dictPath: 'dictionary/' + lang, // replaced by options parameter if string
dictFolder: '', // optional subdirectory of dictPath
filename: '', // name of both aff and dic file
affFile: lang, // name of aff file, overrides filename
dicFile: lang, // name of dic file, overrides filename
typoClass: 'typo', // CSS class applied to all spelling errors,
// will be prefixed with 'cm-'
typoCSS: 'background: rgba(255,0,0,.25)' // CSS applied to typoClass
gutterClass: 'typoFlags', // CSS class and name of CodeMirror gutter
gutterMarkClass: 'typoMark' // CSS class of gutter markers
}
Note that 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!
MIT © Robert Pirtle