badsyntax edited this page Dec 3, 2012 · 14 revisions



1: Download and extract the Spellchecker files

2: Include the jQuery and the Spellchecker files in the <head> section of your page:

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

3: Ensure your back-end services are set up correctly:

PSpell Driver

If you want to use the PSpell driver, you will need to install the following software:

sudo apt-get install aspell aspell-en
sudo apt-get install php5-pspell

You can install additional aspell languages with the following command:

sudo apt-get install aspell-LANG # replace LANG with the language code

Google Driver

If you want to use the Google driver, you will need to have cURL installed:

sudo apt-get install curl php5-curl


Remember to restart your webserver after installing new software or new languages.

Here's how to restart Apache2:

sudo apache2ctl configtest
sudo apache2ctl restart


// Create a new spellchecker instance
var spellchecker = new $.SpellChecker('textarea', {
  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

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>')

// 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) {

// Check for incorrect words in a DOM tree
spellchecker('html').check(elem, function(incorrectWords) {

// Get spelling suggestions for a word
spellchecker('text').getSuggestions('badwordd', function(suggestions) {

// Replace a word in a string of text
var newText = spellchecker('text').replaceWord('Herea', 'Here', text);

// Replace a word in a DOM tree
spellchecker('html').replaceWord('Herea', 'Here', elem);


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

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);


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.success
  • check.complete
  • replace.word.before
  • replace.word
  • select.word


The easiest way to get started is have a look at the simple examples which can be found in the downloadable package. You can also have a look at some of the online spellchecker demos.

Building the package

You'll need nodejs, grunt and grunt-contrib-copy packages installed.

Clone this wiki locally
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.