Implementing TinyMCE spellchecker with GoogleSpell in ASP.Net

A colleague and I spent a few hours this afternoon trying to find a way to implement spellchecking with the TinyMCE WYSIWYG editor. The editor has a spellchecking plugin, but according to the wiki documentation it requires PHP. However, one of the options in the spellchecking plugin is to use the Google Spelling web service and this should of course be possible to call through .net as well. Luckily we stumbled upon the "TinyMCE .Net package" before developing the solution ourselves. It really is strange that there is no comment about this on the TinyMCE Wiki. (I believe I will make one. ;-)

These are the steps you need to take to activate spellchecking in TinyMCE within a .Net website application: (this instruction assumes you have already implemented TinyMCE in your website)

  1. Download the TinyMCE .Net Package.
  2. In that download you will find a .dll-file - Moxiecode.TinyMCE.dll - add a reference to it from your website project.
  3. Add the following tag in the HttpHandlers section in web.config:
    <add verb="GET,HEAD,POST" path="TinyMCE.ashx" type="Moxiecode.TinyMCE.Web.HttpHandler,Moxiecode.TinyMCE" />
  4. Go to your javascript initialization code of your tinyMCE and add the bold parts of this snippet:
    tinyMCE.init({
        theme : "advanced",
        mode : "textareas",
        plugins : "spellchecker",
        theme_advanced_buttons3_add : "spellchecker",
        spellchecker_languages : "English=en,+Swedish=sv",
        spellchecker_rpc_url : "TinyMCE.ashx?module=SpellChecker"
    });
    Note that if you already are using the plugins setting, you only have to add "spellchecker" to the comma separated list, the same goes for your button configuring. If you omit the spellchecker_langugages you will get support for English, Danish, Dutch, Finnish, French, German, Italian, Polish, Portuguese, Spanish and Swedish out of the box, with english set as default. If you want to omit some languages use the format above for the languages you wish to support, and add a + in front of the one you want as default. The text before the = character is your custom label for the language and the text after is the ISO code for the language. Don't forget the spellchecker_rpc_url setting that will connect the spellchecking button with the Moxiecode.TinyMCE.dll which handles the call to the google spell service. For a sample of how the spell function looks, se this sample and click the sixth button in the last row (this sample might not use the google service, so the word suggestions etc might be different, but it will give you the look and feel of the spelling function).

I've had some trouble finding good documentation of the Google Spell Service and it seems as if it is no longer updated but still available to developers already using it (which should include the TinyMCE .Net package even though you haven't used it before). However, use at your own risk should Google decide to delete it. This is the only official documentation I can find and that isn't much...

21 comments :

  1. Thanks so much it works great!

    ReplyDelete
  2. thanks, I need to work in the same way using UpdatePanel... any ideas?

    ReplyDelete
  3. The spell checker was running in just mintues. THANKS!!!

    ReplyDelete
  4. note - for IIS7 you need to add different settings in your web.config file:

    ReplyDelete
  5. Mappings for IIS 7

    <system.webServer>
    <handlers>
    <add name="TinyMCE" verb="GET,HEAD,POST" path="TinyMCE.ashx" type="Moxiecode.TinyMCE.Web.HttpHandler,Moxiecode.TinyMCE" />
    </handlers>
    </system.webServer>

    ReplyDelete
  6. Not working for me ?? It is throwing Error

    ReplyDelete
  7. hey, thanks for the good help, i wana remove the attached toggle buttons with spell checker, and want my editor to check of english as behing spell checker language, can you tell me how can i hide these buttons.
    thanks for repy soon

    ReplyDelete
  8. hey, thanks for the good help, i wana remove the attached toggle buttons with spell checker, and want my editor to check of english as behing spell checker language, can you tell me how can i hide these buttons.
    thanks for repy soon my email is fakhre@gmail.com

    ReplyDelete
  9. The problem I had with the error was because I had two spellchecker buttons on the toolbar and that is not supported.

    ReplyDelete
  10. Awesome! I've been looking for this solution for a long time. Others have given a different RPC URL and handler setting--which does not work. After all that time, in five minutes it now works!

    ReplyDelete
  11. Anyone experiencing the spell check clearing out after a few seconds?

    ReplyDelete
  12. for asp.net mvc I had to set the spellchecker_rpc_url setting to have a leading slash.

    spellchecker_rpc_url : "/TinyMCE.ashx?module=SpellChecker"

    ReplyDelete
  13. i am having trouble with the web.config file.
    It is throwing errors :-
    HTTP Error 500.19 - Internal Server Error
    The requested page cannot be accessed because the related configuration data for the page is invalid.

    ReplyDelete
  14. I found this simply by googling the error message. See comments above on iis7 config. http://support.microsoft.com/kb/942055

    ReplyDelete
  15. Hi,

    Thanks for this gr8 article. It's really helpful, however I have a small problem. What does the TinyMCE.ashx means? is it the page where we have the TinyMCE editor attached?

    ReplyDelete
  16. Hi chathu.
    No, TinyMCE.ashx is an http handler located in the Moxiecode.TinyMCE assembly. When the user wants to spell check a word a request will be sent to this handler who forwards the request to the google spell service. The response from google spell service is then presented as suggestions to the user.

    ReplyDelete
  17. This comment has been removed by the author.

    ReplyDelete
  18. HI,
    I try to post/get the request from tinyMCE.ashx file but actually my Js path is different but ,so getting error 404 file not found how can i configure the path please let me know

    ReplyDelete
  19. HI Spellchecker
    I try to post/get the request from tinyMCE.ashx file but actually my Js path is different but ,so getting request error: 500 how can i configure the path please let me know

    ReplyDelete
  20. if locally not working, try below code:
    spellchecker_rpc_url: '<%=ResolveUrl("~/TinyMCE.ashx?module=SpellChecker") %>'

    when try to open suggesting word, sometimes I gets error. any solution?

    ReplyDelete
  21. There is comma checker online. There is a way to make advantage online. Awesome post!

    ReplyDelete