1. INCLUDE CSS AND JS FILES
<link href="css/jquery.spellchecker.css" rel="stylesheet" />
<script src="js/jquery-1.8.2.min.js"></script>
<script src="js/jquery.spellchecker.min.js"></script>
2. HTML
<textarea id="text-content" rows="5" cols="25">Add your own text and check the spellling</textarea>
3. JAVASCRIPT
(function() {
var element = $('#text-content');
// Init the text spellchecker
var spellchecker = new $.SpellChecker(element, {
lang: 'en',
parser: 'text',
webservice: {
path: '../../webservices/php/SpellChecker.php',
driver: 'pspell'
},
suggestBox: {
position: 'above'
},
incorrectWords: {
container: '#incorrect-word-list'
}
});
// Bind spellchecker handler functions
spellchecker.on('check.success', function() {
alert('There are no incorrectly spelt words.');
});
// Check the spelling
$("#check-textarea").click(function(e){
spellchecker.check();
});
})();
Standalone usage
var text = 'Herea is a sentancec. "How are youu?"';
var elem = $('<div />').append($.map(text.split(' '), function(text, i) {
return new Array(i).join('<div>') + text + new Array(2).join(' </div>')
}).join(''));
// Creates new spellchecker instances
var spellchecker = function(parser) {
return new $.SpellChecker(null, {
lang: 'en',
parser: parser,
webservice: {
path: '../../webservices/php/SpellChecker.php',
driver: 'pspell'
}
});
};
// Check for incorrect words in a string of text
spellchecker('text').check(text, function(incorrectWords) {
console.log(incorrectWords);
});
// Check for incorrect words in a DOM tree
spellchecker('html').check(elem, function(incorrectWords) {
console.log(incorrectWords);
});
// Get spelling suggestions for a word
spellchecker('text').getSuggestions('badwordd', function(suggestions) {
console.log(suggestions);
});
// Replace a word in a string of text
var newText = spellchecker('text').replaceWord('Herea', 'Here', text);
console.log(newText);
// Replace a word in a DOM tree
spellchecker('html').replaceWord('Herea', 'Here', elem);
console.log(elem.text());
4. CONFIG
You can supply custom config when you create a new Spellchecker instance:
var spellchecker = new $.SpellChecker(element, config);
There are the available config options:
var defaultConfig = {
lang: 'en',
webservice: {
path: 'SpellChecker.php',
driver: 'PSpell'
},
local: {
requestError: 'There was an error processing the request.',
ignoreWord: 'Ignore word',
ignoreAll: 'Ignore all',
ignoreForever: 'Add to dictionary',
loading: 'Loading...',
noSuggestions: '(No suggestions)'
},
suggestBox: {
numWords: 5,
position: 'above',
offset: 2,
appendTo: null
},
incorrectWords: {
container: 'body', //selector
position: null //function
}
};
5. API METHODS
Once you've created a new instance of the Spellchecker, you have access to some public methods:
var spellchecker = new $.SpellChecker(element, config);
spellchecker.check(text, callback);
spellchecker.getSuggestions(word, callback);
spellchecker.replaceWord(word, replacement, elementOrText);
spellchecker.on(evtName, handler);
6. EVENTS
You can subscribe to Spellchecker events using the on API method, for example:
var spellchecker = new $.SpellChecker(element, config);
spellchecker.on('check.success', function() {
alert('Check success event fired!');
});
These are the available Spellchecker events you can subscribe to:
-
check.start
-
check.fail
-
check.success
-
check.complete
-
replace.word.before
-
replace.word
-
select.word
JS Tutorial
