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!

Be Sociable, Share!

• 

Related posts:

1. jQuery Impromptu
2. jQuery Impromptu 0.4, a Few New Options
3. New jQuery Impromptu Theme
4. New Impromptu and Demo
5. New jQuery Impromptu Show Effect