Integrating Spell Checking into your Coldfusion Applications

Posted At : June 20, 2006 2:34 PM | Posted By : Robert
Related Categories: Javascript / Ajax, ColdFusion

While the web becomes more popular and easier for publishing content it doesn't mean we are getting better at spelling.

During our quest for a spelling solution, we at Redballoon found a very nice ajax plugin that allows you to add a spell checker into any textarea in your application.

Introducing GoogieSpell.

What is so brilliant about this plug in is its "gmail" like functionality. While this plug in appears to be out of the box it has one very major limitation.

You can't directly run this script online (this is a browser security issue). To solve this you can have a simple "local" sever (i.e. a server that you can send requests to) running that sends requests to Google.

While the author provides solutions for php/perl/asp there was not yet a coldfusion solution available on the site.

So we sat down and developed a coldfusion implementation that slides nicely into our labs blog (Ray Camden's Blog CFC).

Here is the solution we came up with.

Once you have called in the 3 javascripts and the 1 css just put an 'id' on your textarea and instead of calling this that is straight out of the demo.html

var googie1 = new GoogieSpell("googiespell/", "https://www.google.com/tbproxy/spell?lang=");
googie1.decorateTextarea("ta1");

call this

var googie1 = new GoogieSpell("/googiespell/", "http://#cgi.HTTP_HOST#/googiespell/googleapi.cfm?");
googie1.decorateTextarea("ta1");

So essentially all we are doing is calling our coldfusion page instead of the google page directly.

Now, we did have to change one thing in the core "googiespell.js" as it was not passing the form scope correctly across to our coldfusion page.

We changed the createXMLReq from

GoogieSpell.createXMLReq = function (text) { long function }

to

GoogieSpell.createXMLReq = function (text) {
return 'textstring=' + text;
}

And then all we have to do is the http call on the coldfusion page "googleapi.cfm?"

Which you can copy and paste from below

<cfsetting showdebugoutput="false">
<cfsavecontent variable="xmlpacket"><?xml version="1.0"?><spellrequest textalreadyclipped="0" ignoredups="0" ignoredigits="1" ignoreallcaps="1"><cfoutput>#tostring(form.textstring)#</cfoutput></spellrequest></cfsavecontent>
<cfhttp method="post" url="https://www.google.com/tbproxy/spell?lang=en" result="xmlresult">
   <cfhttpparam value="#tostring(xmlpacket)#" type="body">
</cfhttp>
<cfcontent reset="true" type="text/xml"><cfoutput>#xmlresult.filecontent#</cfoutput>

There were many ways we debugged what was going on and one of the most useful ways was using a firefox extension "live headers". This allowed us to log and watch LIVE what each page was passing to each other.

If you would like to know more regarding this project or how to implement it into your application please feel free to leave a comment and we will do our best to help out.

Comments (31) | Print | Download | del.icio.us | Linking Blogs | 9471 Views

Related Blog Entries

Comments
[Add Comment]
Lucas Sherwood's Gravatar Nice work Rob! Now it is time to get it intergrated into Ray's blog so my bad spelling doesn't make it out onto the web anymore!
# Posted By Lucas Sherwood | 6/20/06 3:41 PM
Chad's Gravatar I have tried to implement this on my site running ColdFusion 6 and I always get a "An error was encountered on the server. Please try again later".

Can anyone give me any ideas?
# Posted By Chad | 7/4/06 3:52 AM
Rob's Gravatar have you completed the update to the post as well. there was an issue with the form encoding and coldfusion that was recognised after the post when we started to implement it where there was html code.
# Posted By Rob | 7/4/06 8:19 AM
Chad's Gravatar Yes, I have completed the update. And every time it comes back saying something is wrong with the server. Anywhere I can post my code? Could this have anything to do with a firewall setting we have not allowing the https call?
# Posted By Chad | 7/4/06 8:49 PM
rob's Gravatar yes the call to google is via htttps... the way we debugged the coldfusion action page and ensured it was calling and returning from google was to set up a dummy string and do a dump of the result without even going near the javascript code... i could provide you a dummy test page if you would like?
# Posted By rob | 7/5/06 8:03 AM
rob's Gravatar thought this was a underful comment on ray's blog so i have copied it to here as well.

Anyone stuck in the past and using MX6.1 will need to alter googiespell/googleapi.cfm slightly. Remove result="xmlresult" from the CFHTTP call on line 3, and change the CFOUTPUT to be cfhttp.filecontent. Enjoy.
Posted By Dave Quested | 7/4/06 5:37 PM
# Posted By rob | 7/5/06 1:09 PM
Scott's Gravatar Hi Rob,

First of all, this looks like a perfect solution for us, and I wanted to thank you for putting it together.

Unfortunately, we are having trouble getting the script to work, even after the June 22 update. We are running ColdFusion 7 on an Apache 2 Server on a Windows 2003 box. I have set up a test page at http://harvest.cals.ncsu.edu/demo.cfm , but it seems to just churn and churn. I noticed that the Coldfusion 6 user above mentioned he thought he might be having problems because of a firewall. We've also got a firewall, so could it be as simple as allowing Google's IP address to have access to our server?

Also, you mentioned a dummy test page in your last response. Could you post that for us to try out too?

Thanks for any help you can provide us!

Scott
# Posted By Scott | 7/20/06 7:01 AM
Scott's Gravatar Hi Rob,

Please disregard my previous message. With some help from another CF guy in our office, we were able to get it working on MX and on 6.1

Thanks again for your work on this!

Scott
# Posted By Scott | 7/21/06 3:38 AM
rob's Gravatar glad to hear it :) sorry it was my birthday yesterday so i was offline and in the pub!

let me know if you require any more assistance.
# Posted By rob | 7/21/06 7:19 AM
Rob's Gravatar this is a java solution, also looks at the browser security issue.

http://jamasoftware.com/blog/?p=12
# Posted By Rob | 8/7/06 2:20 PM
Eugene's Gravatar I've read the documentation because I have a problem with implementing spell checker to my code for Firefox browser. My development is coding on PHP, so I've taken an example of local server, <a href=http://orangoo.com/labs/uploads/sendReq.php>Current working PHP version</a> on documentation page at orangoo.com/labs. But when I run checker and see the result on Ajax's function, it returns:

HTTP/1.1 302 Found
Location: http://www.google.com
Date: Fri, 22 Sep 2006 11:05:52 GMT
Content-Type: text/html
Server: GFE/1.3
Content-Length: 218
Connection: Close


<HTML><HEAD><meta http-equiv="content-type" content="text/html;charset=utf-8">
<TITLE>302 Moved</TITLE></HEAD><BODY>
<H1>302 Moved</H1>
The document has moved
<A HREF="http://www.google.com">here</A>.
</BODY></HTML>

Could you explain me, what does it mean?
May be Google's script has another address now?
# Posted By Eugene | 9/22/06 10:39 PM
Nick K's Gravatar In googiespell 3.96, the XML data is made ready by the JS file, and sent in the content of the POST request rather than as a form field. So, you can simplify the 'googleapi.cfm?' code somewhat to just use GetHttpRequestData().content in the httpparam. Mine now looks like the following (presuming that the code doesn't get swallowed by the comment system).

<cfsetting showdebugoutput="false">
<cfhttp method="post" url="https://www.google.com/tbproxy/spell?lang=en&h...
   <cfhttpparam type="body" value="#GetHttpRequestData().content#" />
</cfhttp>
<cfcontent reset="true" type="text/xml"><cfoutput>#xmlresult.filecontent#</cfoutput>
# Posted By Nick K | 11/7/06 2:29 AM
Nick K's Gravatar ...oops, mixing up 6.1 and 7 code in the cut'n'paste:

For 6.1, replace xmlresult with cfhttpcontent
For 7, add result="xmlresult" as an attribute to cfhttp.
# Posted By Nick K | 11/7/06 2:32 AM
Boson Au's Gravatar been trying to incorporate this with a rich text editor (the asbru hardcore editor)
http://editor.asbrusoft.com/hardcore/webeditor/ind...

to no avail. as you can see here:

http://distance.jhsph.edu/bau/spell/

the normal no frills version works fine, the one w/ the rich text editor built in doesn't.

any ideas? the way the editor gets built is it actually creates the text area (if you create the editor with a name of wikiEditor, for instance, the text field's id is wikiEditor_textarea). as you can see the googiecheck sees the text field but it seems as if it is not checking the text.
# Posted By Boson Au | 2/17/07 7:58 AM
FLaX's Gravatar "I have set up a test page at http://harvest.cals.ncsu.edu/demo.cfm , but it seems to just churn and churn. I noticed that the Coldfusion 6 user above mentioned he thought he might be having problems because of a firewall. We've also got a firewall, so could it be as simple as allowing Google's IP address to have access to our server?"
--Scott
@Scott, what did you do to get this running behind your firewall. I believe I'm having the same problem here. I get mine going, but it hangs and hangs...

Someone please help...?

thanks
# Posted By FLaX | 3/6/07 9:21 AM
robert's Gravatar Have you downloaded the firefox extension "liveheaders" and actually see if you are successfully doing a call to google and if so if your getting one back??
# Posted By robert | 3/6/07 9:41 AM
FLaX's Gravatar @robert, k I just installed liveheaders, what do I need to look out for? Do I hit spell check, then start capturing...? and if so, what am I looking for with the header info...?

TIA
# Posted By FLaX | 3/6/07 10:04 AM
robert's Gravatar Yep you are trying to capture whether your call is being sent and if google are returning a call.
# Posted By robert | 3/6/07 10:45 AM
FLaX's Gravatar ok, and If I'm not receiving any response back from google? what may be the issue? firewall?? What can I do to bypass this issue? I would really like to use this spell checker. it fits for what I need perfectly.

:-)
# Posted By FLaX | 3/7/07 2:12 AM
FLaX's Gravatar yea I'm not seeing anything from Google.

:-(
# Posted By FLaX | 3/7/07 2:28 AM
mqf's Gravatar Hmm. It does not seem to be doing any spell checking:

From firebug:

<?xml version="1.0" encoding="UTF-8"?><spellresult error="1"/>
# Posted By mqf | 3/9/07 4:52 AM
robert's Gravatar are you using CFMX 6 or 7?
# Posted By robert | 3/9/07 3:53 PM
mqf's Gravatar robert: i'm using CFMX 7
# Posted By mqf | 4/21/07 2:43 AM
Tuyen's Gravatar I use version 4 and still get the "An error was encountered on the server. Please try again later"... Here is how to fix it

on googiespell.js line 220

OLD CODE:
return val.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");

NEW CODE:
return val.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/%/g, "");
# Posted By Tuyen | 8/1/07 1:14 AM
Tuyen's Gravatar Does anyone know how to fix this issue: "This page contains both secure and nonsecure items"? I use googiespell on a HTTPS site: the spell check process is ok, it retuns list of incorrect spelling words >> when I clicked on those words I got the "secure and nonsecure message"...

I checked all the images: they all have "https" link (indicator.gif, ok.gif...). The only think I guess which might cause this issue is we use "XMLHTTP" request to the google web service... Does anyone know how to fix this?

Thanks,
# Posted By Tuyen | 8/1/07 11:51 PM
Shazbot!'s Gravatar 2 questions

I got googiespell working on our CF7 server/win2003/IIS

question1, we are looking into licensing it and besides the owner's $50 fee are there any other fees you are aware of?
And I have been researching google's APIs and they all require a key to use them. Right now we are testing the googiespell in a test environment and I am assuming we are using the owner's key. Where and how would I use the company key?

Also,
We are planning on getting CF8 in the near future and one of the key features is a new RTF editor which is basically the FCKEditor. Has anyone been able (or know any sites) on how to use Googiespell with the FCKEditor? I am still researching and tweaking this but cannot find a solution.

TIA!
# Posted By Shazbot! | 10/17/07 5:20 AM
Ken's Gravatar I just located this spell checker today and I'm getting the same kind of message that others have reported. While the scripts are all in place, when I click the graphic to connect to Google, I get "An error was encountered on the server. Please try again later."

I've tried applying the various fixes described in previous messages, with no success.

The spell checker is on machines with ColdFusion MX 7, Windows XP and IIS 6 or later. It has been placed on machines that are outside the local firewall as well.

Are there other issues that need to be addressed to get this to work okay?

Any suggestions would be greatly appreciated. Thanks.
# Posted By Ken | 2/14/08 1:50 PM
Ken's Gravatar Well, I've got it to work okay on another machine. I think there may be a problem with the script on the machines that aren't working...basically an error in the script that occurred when changing the code to work with ColdFusion. It think it is a missing bracket that wasn't noticed. I caught the error on the current location. Guess I'll give it another try when I get back to work.
# Posted By Ken | 2/14/08 2:11 PM
BeatificFaith's Gravatar I was getting "An error was encountered on the server. Please try again later."

Here is what I did to get it to work:
0) make sure the script code on your page is within cfoutput.
1) make sure you are on a CF version that handles cfhttp.
2) make sure you are pointing to the right directory.

I used the firefox extension firebug. This showed me any and all errors on the console.
# Posted By BeatificFaith | 3/4/08 5:28 AM
WIJI's Gravatar It is possible to use google spell Cold Fusion 5?

I need help!

i have an error with #toString(form.textstring)#. i think it is not work on my cold fusion version. i can do?

forgive my English and thanks

An error occurred while evaluating the expression:

#toString(form.textstring)#

Error near line 9, column 14.

Error resolving parameter FORM.TEXTSTRING

The specified form field cannot be found. This problem is very likely due to the fact that you have misspelled the form field name.

The error occurred while processing an element with a general identifier of (#toString(form.textstring)#), occupying document position (9:13) to (9:39) in the template file
# Posted By WIJI | 3/26/08 8:40 PM
[Add Comment]