Using Impromptu for Spell Check: YUI, Dojo, NicEdit Editors
A common feature missing in many javascript editors is spell check. And if you are able to successfully use spell check it is also nice to have it cleanly integrated as a button on the wysiwyg toolbar. Guess What! Using jQuery Impromptu, jquery-spellchecker, and a small plugin I whipped together called impspeller (impromptu speller). To bypass most of the integration headaches between the different editors I simply use Impromptu to present the text and apply the spell checker to that. All you have to do is create a few lines of code to get and set the content from the editor! Here's the example function using the Dojo Editor:
function runImpspellerDojo(id){
var mp = dijit.byId(id).getValue(false);
$.impspeller(mp,{
success: function(text,html,el){
dijit.byId(id).setValue(html);
}
});
}
//and call it with:
runImpspellerDojo('textarea_id');
Another thing to note is that even though I'm using jquery-spellchecker the plugin is pretty easy to use whatever spell checking you want. To get a better feel of how to do this lets take a look at the $.impspeller function:
$.impspeller(html, options);
//html is the text or html to perform the spell check on
//options are the config to use callbacks
//or to tell imp speller how to use your spell check library
By taking a look at the source we can see these are the options, and viewing the source should be pretty self explanitory:
$.impspeller.defaults = {
checkSpelling: function(containerId){
//call the spell check plugin here... (jquery-spellchecker init functions)
Spelling.init(containerId);
Spelling.check(function(){});
},
doneCheckSpelling: function(containerId){
//deconstruct spell check plugin if necessary (jquery-spellchecker init function)
Spelling.remove();
},
impromptuOptions: {
//see impromptu docs for these...
},
success: function(correctedtext, correctedhtml, misspelledcontentElement){
//parameter names should be self explanitory
//this is called when the user clicks Save
},
cancel: function(originaltext){
//this is called if the user clicks Cancel
}
};
As of now I have created several examples of add Spell Checking to the following:
- Spell Check for Divs
- Spell Check for Textareas
- Spell Check for YUI Editor
- Spell Check for Dojo Editor
- Spell Check for nicEdit
These examples are all I will be providing for documentation. The source is very self explanatory, each one using a Wysiwyg will first add a new button to the editor, then tie our function like shown above to coordinate calling the spell checker. In all of the examples I show also how to use a plain link to call Impspeller.
So now you're wondering where to get all the goods. Here are links to these fine plugins:
- jQuery
- jQuery Impromptu
- jquery-spellchecker
- jquery-impspeller
- Use this CSS for Impromptu and impspeller
- Spell Check Image
If you get lost anywhere along the way just dive in to the source of one of the examples. Enjoy!