Skip to content

Documentation

Jump to bottom Edit New page
badsyntax edited this page Dec 3, 2012 · 14 revisions

Documentation

Installation

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

NOTE

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

Here's how to restart Apache2:

sudo apache2ctl configtest
sudo apache2ctl restart

Usage

// 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
$("button#check").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());

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

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

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

Examples

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.

Add a custom footer
Add a custom sidebar
Clone this wiki locally