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!