TinyMCE spellchecker java implementation


TinyMCE rich-editor have a plugin to provide Ajax-spell-checking functionality. See the link to TinyMCE plugin documentation
So, if you have a PHP and PSPell/ASpell on your server – then you are fine and you can use them, but this post is about the situation then you don’t have them or want to use your own implementation. In that case we can configure “spellcheck” plugin to use our own service.
What we have to do is to create a webservice compatible with the “TinyMCE spellchecker plugin” and configure spellcheck with the URL to that service. Because of browser security reasons this service should be hosted on the same domain as the application which use it (ajax calls can be blocked if requested URL is on another domain then your page). And since we are using java then we can use open-source Jazzy spellchecker library to implement spell-checking functions required by the TinyMCE spellchecker plugin

tinyMCE.init({
	theme : "advanced",
	mode : "textareas",
	plugins : "spellchecker",
	theme_advanced_buttons3_add : "spellchecker",
	spellchecker_languages : "+English=en-us,Swedish=sv",
        spellchecker_rpc_url    : "/spellchecker/jazzy-spell-check", //spellcheck url
});

In the configuration example above we set the link to our splechecker-service-url with the “spellchecker_rpc_url : “/spellchecker/jazzy-spell-check”;”
“/spellchecker/jazzy-spell-check” will be served by the servlet which use Jazzy project.
TinyMCE spellchecker plugin send JSON request to spellchecker_rpc_url with two possible methods:

  1. checkWords – send the array of words as params attribute and expect the JSONArray of misspelled words in the result JSON-response attribute.
  2. getSuggestions – send the checked word as the first and only element of params attribute and expects the JSONArray of suggested words the result JSON-response attribute.

So, when user click on “check spellcheck” button, plugin get the list of words and send them as the JSON request, with two parameters “method”=”checkWords” and “params”=”JSONArray(words)”. Servlet return the list of misspelled words in the JSON-response "{'id':null,'result': JSONArray(misspelled-words),'error':null}" , misspelled words are highlighted and once user click on one of them – request to get the list of suggested words is send to the server. “method”=”getSuggestions” and “params”=”JSONArray(checked-word)” . Server return the "{'id':null,'result': JSONArray(word-suggestions),'error':null}" JSON-response and list of suggestions is displayed to the user.

Update: You can see the backend java source code at the jspellchecker sourceforge project. SVN is accessible via “svn co https://jspellchecker.svn.sourceforge.net/svnroot/jspellchecker jspellchecker” or you can browse source-code . Please take a notice that source-code doesn’t include dictionaries. The dictionaries are located in the /WEB-INF/dictionary/${lang}-${country-code}.
Special thanks to the Rich Irwin who initially provide me the code.
The quality of spell-checking with jazzy depends on the quality of your dictionary. I think it possible to get thelist of words from Mozilla Dictionaries by saving XPI and opening it as ZIP file, saving dictionary file and remove “/xyz” from the end of the words, but please check the licensing notice before. You can also extract dictionaries form aspell (have no details how to do it)

Integration steps (thanks to Adam-Musial Bright)

  1. Check out / download
    svn co https://jspellchecker.svn.sourceforge.net/svnroot/jspellchecker/trunk
  2. cd trunk/tinymce-spellchecker
  3. svn export web ~/temp/jspellchecker
  4. svn export build/classes/org ~/temp/jspellchecker/WEB-INF/classes/org
  5. Now deploy it on your webapp server
  6. Now put something like this into your tinyMCE.init:
    spellchecker_languages : “+English=en,German=de”,
    spellchecker_rpc_url : “/jspellchecker/google-spellchecker”
    possible values are

    • “/jspellchecker/jmyspell-spellchecker”
    • “/jspellchecker/jazzy-spellchecker”
    • “/jspellchecker/google-spellchecker”
    • “/jspellchecker/lucene-spellchecker”

Update: To integrate TinyMCE-4 spellchecker with your server-side see http://achorniy.wordpress.com/2013/05/27/tinymce-4-spellcheker-integration/

About these ads

https://www.facebook.com/achorniy

Tagged with: , , , , , , ,
Posted in Software Development
38 comments on “TinyMCE spellchecker java implementation
  1. darren says:

    Hey,
    Would love to see your Java code for this. I’m sort of stuck now because my server doesn’t doesn’t seem to be receiving any parameters from tinyMCE.

  2. Tara Peltier says:

    Thank you! This is exactly what I was looking for, and it works great. THANKS!!!!!

  3. mounika says:

    Hi can u plz post the url for down load the code for spellcheking with tinemce

  4. Mounika says:

    Hi Andrey,

    Thanks alot .It working very fine this is what i am looking for.Now i am going to inplement I18n .once again thanks for all

    Thanks & Regards,
    Mounika

  5. dreamtangerine says:

    May be JMySpell is a better backend.

  6. [...] } In my previous post I was asked about the “May be JMySpell is a better backend.”  On that moment I don’t know [...]

  7. Nice job – worked fine for me.
    For all unexperienced users all steps you need:
    1) Check out / download
    svn co https://jspellchecker.svn.sourceforge.net/svnroot/jspellchecker/trunk
    2) cd trunk/tinymce-spellchecker
    3) svn export web ~/temp/jspellchecker
    4) svn export build/classes/org ~/temp/jspellchecker/WEB-INF/classes/org
    5) Now deploy it on your webapp server
    6) Now put something like this into your tinyMCE.init:
    spellchecker_languages : “+English=en,German=de”,
    spellchecker_rpc_url : “/jspellchecker/google-spellchecker”

    Done.

  8. Elliott says:

    What is the naming convention you have to use when adding a dictionary? I noticed that jazzy comes with a 3 word dictionary for testing but I keep getting:

    SpellCheckException: There is no dictionaries for the language=en-us

    even though the dictionary is under dictionary/jazzy/en-us/en-us.0

    I saw in your svn comments that the path changed, but dictionary/en-us/en-us.0 didn’t work for me either.

    • Andrey Chorniy says:

      If you are using JazzySpellCheckerServlet
      it resolve the path to the WEB-INF/dictionary/jazzy directory
      String pathToDictionaries = getServletContext().getRealPath(“/WEB-INF/dictionary/jazzy”);
      then iterate all files in the directory ${pathToDictionaries}/${language}
      and the do the same in ${pathToDictionaries}/global

      JMySpellCheckerServlet look for dictionary in the
      /WEB-INF/dictionary/jmyspell/${language}.zip

      please take a notice that your server should explode WAR file you are using to access the dictionaries in that way.

      BTW, here is updated instructions – you can use ANT to build war
      1) Check out / download
      svn co https://jspellchecker.svn.sourceforge.net/svnroot/jspellchecker/trunk
      2) cd trunk/tinymce-spellchecker
      3) ant
      4) Now deploy war in “/out” directory on your webapp server
      5) Now put something like this into your tinyMCE.init:
      spellchecker_languages : “+English=en,German=de”,
      spellchecker_rpc_url : “/jspellchecker/jmyspell-spellchecker”

      • Elliott says:

        Thanks for the quick reply!

        I’ve checked that the war file is exploding and right now I’m hitting the servlet directly at “$base-path/tinemce-spellchecker/jazzy-spellchecker”. I’m actually trying to get this running on a Confluence instance (which has tinyMCE melded in with it) but adding custom plugins to tinyMCE is a little bit of a chore. I was hoping to be able to check that the servlet was working before diving full into the tinyMCE integration. Could it just be missing some parameters in the request?

        I should be able to get ANT tomorrow so I can build everything fresh. I believe I was almost able to get the google spellcheck to work until I realized it actually queries google (when I was getting bad SSL messages) and is not going to work for my situation.

      • Andrey Chorniy says:

        Hi Elliot,
        I’m not following what you are trying to do here “I’m hitting the servlet directly at “$base-path/tinemce-spellchecker/jazzy-spellchecker”
        But anyway, first-of all check that you can access the servlet by opening the URL like
        http://${server}:${port}/spellchecker/jmyspell-spellchecker or http://${server}:${port}/spellchecker/jmyspell-spellchecker/jazzy-spellchecker
        you should get “This servlet expects a JSON encoded body, POSTed to this URL” (it’s normal since servlet process only POST requests)

        then in your tinyMCE.init update the follwing parameters and other params
        spellchecker_languages : “+English=en,German=de”,
        spellchecker_rpc_url : “/spellchecker/jmyspell-spellchecker” [THIS IS A PATH YOU PREVIOUSLY TEST]

  9. Elliott says:

    I named the project tinymce-spellchecker when I checked it out from svn so my path is actually:

    http://${server}:${port}/tinymce-spellchecker/jazzy-spellchecker

    This is what gives me a 500 error and a stack trace saying, “SpellCheckException: There is no dictionaries for the language=en-us”

    I think the main problem is that I’m working off the classes built and committed in svn (since I don’t have ANT yet). I’ll build everything clean tomorrow and post back my results. Thanks again for the tips!

    • Elliott says:

      (Sorry I broke the nested comments)

      Cleaned and built and now I get,

      “This servlet expects a JSON encoded body, POSTed to this URL”

      so I should be good from here out. You rock!

  10. Hamzia209 says:

    I used your editor and I integrated it with my website using Java. I want to add spell checker and I Look to the steps that Adam added but I need to know whether i still to download any dictionary and if yes how can i do that, and what to download from the link that Adam used. I used Apache tomcat 5.0 and Java 5. Thanks

  11. Michael says:

    Thanks Andrey for this example,
    I made two changes to this line,

    spellchecker_languages : “+English=en,Swedish=sv”

    Changed to
    spellchecker_languages : “+English=en-us,Swedish=sv”,

    (add -us and comma at the end)

    Work well !

  12. Cheryl says:

    Hi.

    How can I get these files “3) svn export web ~/temp/jspellchecker” and “4) svn export build/classes/org ~/temp/jspellchecker/WEB-INF/classes/org” without SVN?

    Thanks,

    Cheryl

  13. Figure out how to handle Search engine marketing WP Plugin…

    [...]TinyMCE spellchecker java implementation « Developer Notes[...]…

  14. [...] of TinyMCE Spellchecker plugin to a web application which utilitizes Spring MVC.  I used Andrey’s guide to make this happen.  His instructions worked great until Spring was thrown into the mix.  Spring [...]

  15. webnet668 says:

    I found this very useful, thanks! I did also run into an additional step when using this with SpringMVC. See here: http://blog.benkuhl.com/2012/05/tinymce-spellcheck-implmentation-with-spring-mvc/

  16. raju says:

    hi ,

    Iam using spellcheck it is working very fine for me when i click on the icon.but i want this spell check has to be done by default means with out clicking the icon.

    thanks in advance .

    raju

    • Andrey Chorniy says:

      Hi Raju,
      I have some ideas how to implement it – but please take in mind that this spellchecker make a request to server and send the edited text to it, and that add additional complexity and overhead to use “check-as-you-type” approach.
      Generally, what you need here is to add event-handler to “text-changed” event (or to key-up / key-down) and schedule “spell-checking” if text-changed in background.

      Here is the approach I quickly find in google http://blog.o-x-t.com/2010/04/11/background-spell-check-in-tinymce/
      here they create the timer which send spellcheck request every 3 seconds, but if user keep typing – this request (timer) will be removed.

      This approach is quite simple but powerful, you may also read comments – they outlined the possible performance problems, it’s quite expensive to send whole text to server. And there is a lot of room for optimization here. The most important “performance upgrade” would be to be able to detect the changes and send only them – that will minimize the amount of sent and processed data. But not sure if that will work well – that needs some experiments.
      I would like to implement it in slightly different way – “send only changed text” and do it even if user keep typing and I’m going to make some experiments with that.

  17. Kosh says:

    I get the following error when using jspellchecker-

    Found no context for “/jspellchecker/google-spellchecker”. This request does not match the context path for any installed Web applications,and there is no default Web application configured.

    Do you know what I’m doing wrong?

    • Andrey Chorniy says:

      “/google-spellchecker” is the servlet-path for google-spellchecker servlet (take a look at the web.xml),
      so it seems that you either do not deploy “jspellchecker.war” at all or not deployed it as “/jspellchecker”

      I’m going to update the code in the sourceforge, and create “example web app” so it will be easier to start on using spellchecker with TinyMCE. As well I will update code to use maven build and latest libraries. Will need some time to finish that

    • Andrey Chorniy says:

      Code updates are ready – you may download two projects (maven) from https://sourceforge.net/p/jspellchecker/code/HEAD/tree/trunk/ build/deploy them and see if it works for you
      please ensure that your “/environment/local/jspellchecker.properties” points to the correct path”dictionaries.directory=c:/apps/jspellchecker/dictionaries” (use -Dprofile=local) for the maven build
      dictionaries may use the content of “jspellchecker-servlet/src/dictionaries”

      • zhou jiang says:

        Hi,

        it is very good article to guide me, I actually followed each step with Jazzy , but I get error response in IE.

        Error response:DOCTYPE htmlnullnullnullnullnullnullnullnullnullnullnullnullnullnull
        redirect_detection – do not remove ” null

        any idea what error it is ?

        in firefox :

        Error response:

        null
        null
        null
        null
        null
        null
        [if IE]>

        <![endif]
        null
        null
        null
        redirect_detection – do not remove!

        null

      • zhuo jiang says:

        Hi, Andrey

        I need to apologize for my careless mistake, there was wrong spell in
        spellchecker_rpc_url : “/spellchecker/jazzy-spellchecker
        which I point to /jspellchecker/jmyspell-spellchecker.

        however, this plugin works perfect for me.
        btw, is there any commercial usage constraint for this java plug-in ?

  18. Andrey Chorniy says:

    You are free to use it. It uses “MIT License” (http://opensource.org/licenses/MIT)

  19. Andrey Chorniy says:

    Update: To integrate TinyMCE-4 spellchecker with your server-side see http://achorniy.wordpress.com/2013/05/27/tinymce-4-spellcheker-integration/

  20. […] came across this page: http://achorniy.wordpress.com/2009/08/11/tinymce-spellchecker-in-java/ but I’m not familiar with SVN, so I’m not really sure how to follow the steps, and […]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 31 other followers

%d bloggers like this: