kelvinluck.com

a stroke of luck

Using spell checker for TinyMCE with .NET on IIS


Recently I’ve been working on a website which is built in C sharp using the .NET framework (version 2) and running on IIS. This is a fairly different experience to my usual linux/ apache/ php/ mysql and actionscript setup but it’s been interesting and rewarding. I’m planning a series of posts documenting things that I’ve found out and like or dislike about this environment but for now just a quick one about how to get the spell checker for TinyMCE working…

TinyMCE is “a platform independent web based Javascript HTML WYSIWYG editor control” which is very popular on the web (in fact I am using it to create this post in wordpress!). It comes with heaps of functionality and plugins including a spellchecker. As you’ll see at that link though, the spell checker requires PHP on the serverside… Or does it?

If you look on the TinyMCE download page you will see that there is a .NET package available. I was curious about what this was, especially when I looked through the zip and found that it contained a SpellChecker folder. Looking at the code it turns out that this is the alternative of the PHP code necessary for implementing the spell checker – it accepts the AJAX request from a TinyMCE instance, sends it off to Google’s spell checking web service and sends the relevant results back in the AJAX response. Yay! Now I needed to find out how to use it – for some unknown reason this all seems to be undocumented and google wasn’t bringing back any answers either.

Looking through the c# code, I found that the .NET package is implemented as an IHttpHandler. Once I knew that it was pretty easy to figure out how to configure IIS to use the code. Basically you need to drop the Moxiecode.TinyMCE.dll from the .NET package into the bin folder of your website. Then open your web.config file and find the httpHandlers node inside the system.web node and add the following line in:

<add verb="*" path="TinyMCEHandler.aspx" type="Moxiecode.TinyMCE.Web.HttpHandler, Moxiecode.TinyMCE" validate="false" />

This tells IIS that all calls to /TinyMCEHandler.aspx should infact be handled by the Moxiecode.TinyMCE.Web.HttpHandler class in the Moxiecode.TinyMCE assembly. The validate=”false” means that IIS won’t check if this dll and class can be found unless you actually request that page (this is useful if you have seperate applications mapped to virtual directories below this web.config as it will prevent those applications throwing errors because they can’t find the dll)

Now you just have to set up your TinyMCE instances to include a spell checker button and to know the correct place to look for the serverside script. Here is how we instantiate TinyMCE:

tinyMCE.init({
   mode : "textareas",
   theme : "advanced",
   plugins : "paste, spellchecker",
   theme_advanced_buttons1 : "bold,italic,underline,separator,justifyleft,justifycenter,justifyright,justifyfull,separator,bullist,numlist,separator,undo,redo,separator,link,unlink,separator,cut,copy,paste,pastetext,pasteword,separator,forecolor,backcolor,separator,code,separator,spellchecker",
   spellchecker_rpc_url: "/TinyMCEHandler.aspx?module=SpellChecker"
});

The important things are:

  • Added “spellchecker” to the plugins list.
  • Added a “spellchecker” button to the buttons list.
  • Added the spellchecker_rpc_url which tells TinyMCE where to find the serverside script.
And that’s all there is to it. As you can see, it’s very easy as all the code is available but for some reason it seems to be undocumented and I couldn’t find any information out there about how to set it up. So hopefully this post will save someone else the time I spent figuring it out :)