利用Google接口实现拼写检查

在开发一个国外外包项目时，客户提出一个需求，就是希望在文本框中输入单词，在保存前能够进行拼写检查，如果发现单词错误，可以提醒用户进行改正，为此，在结合参考了各种方案之后，选择了一个免费的方案，Google的一个API接口，https://www.google.com/tbproxy/spell?lang=，该接口提供多种语言的拼写检查，并能够返回相似的单词，并且幸运的是，在网上找到了一个开源的程序包googiespell，所以经过简单的包装处理，做成了一个拼写检查的小控件，使用起来就很方便了。

实现原理
在.net的页面上，在submit按钮提交之前，将页面的文本框内容，通过ajax的方式，采用代理类的方式，发送给Google的接口，接口会返回拼写结果，如果没有拼写错误，浏览器端就直接执行提交操作，如果有错误，弹出一个Spell Check Error的对话框，提示用户进行修改，点“yes”返回页面修改，点“No”的话就忽略掉拼写错误，直接提交。

代码分享
用户控件Shouji138.com.SpellValid.ascx
这个文件封装了错误提示的输入框效果，还有提交按钮的一些操作代码。
<%@ Control Language="C#" AutoEventWireup="true" Codebehind="Shouji138.com.SpellValid.ascx.cs"
Inherits="SpellCheck.Shouji138_com_SpellValid" %>

<script type="text/javascript">
var googie5 = new GoogieSpellMultiple("/googiespell/", "/googiespell/sendSpellReq.aspx?lang=");

//New menu item "Add"
var add_checker = function(elm) {
return true;
};
var add_item = function(elm, current_googie) {
googie5.ignoreAll(elm);
};
//googie5.appendNewMenuItem("Add", add_item, add_checker);

var fn_no_more_errors = function(e) {
// alert('no more errros');
passcheck = true;
}

googie5.setDependent();
googie5.setCustomAjaxError(function(req) {
// alert('error');
});
googie5.useCloseButtons();
googie5.noMoreErrorsCallback(fn_no_more_errors);
googie5.setSpellContainer("global_spell_container");
// googie5.decorateTextareas(textbox, "hel", "t");

//Getstatespan2();

var passcheck = false;
var savebutton = null;
var waiti = 0;

function CheckSpell(obj) {

if (typeof (Page_ClientValidate) == 'function') {
if (Page_ClientValidate() == false) {
return false;
}
}
savebutton = obj;

if (googie5.noErrorsFound() || passcheck) {
// alert("CheckSpell ok");
return true;
}
//alert(document.getElementById("global_spell_container").innerHTML);
if (document.getElementById("okclickspan"))
invokeClick(document.getElementById("okclickspan"))
setTimeout("WaitSavetate()", 1000);
return false;
}

function ToDoNext() {

if (savebutton.href) {
var href = savebutton.href.replace("javascript:", "");
href = unescape(href);
//alert(href);
eval(href);
}
else
{
__doPostBack(savebutton.id,"");
return true;
}
}

function WaitSavetate() {
if (waiti > 100) {
waiti = 0;
return;
}
waiti++;
//document.getElementById("statespan").innerHTML = "waiting:" + waiti + " " + googie5.noErrorsFound();
if (passcheck || googie5.noErrorsFound()) {
//alert("pass");
//invokeClick(savebutton);
ToDoNext();

// __doPostBack(savebutton.id, '');
}
else {
if (googie5.getState() == "checking_spell") {
setTimeout("WaitSavetate()", 500);
}
else {
showdivspellcheckerror();
}
}
}
function getText1value() {
alert(document.getElementById(textbox).value);

}
function invokeClick(element) {
if (element.click) element.click();
else if (element.fireEvent) element.fireEvent('onclick');
else if (document.createEvent) {
var evt = document.createEvent("MouseEvents");
evt.initEvent("click", true, true);
element.dispatchEvent(evt);
}
}

</script>

<script type="text/javascript">
function closedivspellcheckerror() {
document.getElementById("divspellcheckerror").style.display = "none";
}
function showdivspellcheckerror() {
var alertFram = document.getElementById("divspellcheckerror");
alertFram.style.position = "absolute";
alertFram.style.left = "50%";
alertFram.style.top = "50%";
alertFram.style.marginLeft = "-125px";
alertFram.style.marginTop = -75 + document.documentElement.scrollTop + "px";
//alertFram.style.width = "450px";
//alertFram.style.height = "150px";
//alertFram.style.background = "#ccc";
alertFram.style.textAlign = "center";
//alertFram.style.lineHeight = "150px";
alertFram.style.zIndex = "10001";
document.getElementById("divspellcheckerror").style.display = "";
}
</script>

<div class="shouji138errorbox" id="divspellcheckerror" style="display: none; width: 400px">
<div id="SccNotify" class="yui-module yui-overlay yui-panel" style="visibility: inherit;">
<div class="shouji138_notice-error">
Spelling Error</div>
<div class="shouji138_notice-body">
Spelling errors detected.<br />
Do you wish to correct them?
<br />
Click Yes to return,click No to continue submit.<br />
</div>
<div class="shouji138_notice_foot">
<a href="javascript:;" onclick="closedivspellcheckerror();">
<img src="googiespell/btn_yes.gif" style="border: 0px;" alt="yes" /></a>   <a
href="javascript:ToDoNext();"><img src="googiespell/btn_no.gif" style="border: 0px;"
alt="no" /></a>
</div>
</div>
</div>

代理类：sendSpellReq.aspx.cs
这个类的作用就是发送请求到Google的接口：
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

using System.Net;
using System.IO;
using System.Text;

namespace SpellCheck.googiespell
{
public partial class sendSpellReq : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
Response.Buffer = true;
Response.Expires = -1;
Response.Charset = "utf-8";
Response.ContentType = "text/html";
//手机主题 http://www.shouji138.com/
string url = "https://www.google.com/tbproxy/spell?lang=" + Request.QueryString["lang"];
Stream InputStream = Request.InputStream;
StreamReader inputreader = new StreamReader(InputStream, Encoding.UTF8);
string arcxml = inputreader.ReadToEnd();
//Log.SaveNote(arcxml);

HttpWebRequest myRequest = (HttpWebRequest)WebRequest.Create(url);
myRequest.Method = "POST";
byte[] postBytes = Encoding.UTF8.GetBytes(arcxml);
myRequest.ContentType = "application/x-www-form-urlencoded";
myRequest.ContentLength = arcxml.Length;

// 发送数据
using (Stream reqStream = myRequest.GetRequestStream())
{
reqStream.Write(postBytes, 0, postBytes.Length);
}
HttpWebResponse HttpWResp = (HttpWebResponse)myRequest.GetResponse();
StreamReader reader = new StreamReader(HttpWResp.GetResponseStream(), Encoding.UTF8);
string result = reader.ReadToEnd();
reader.Close();
HttpWResp.Close();
// Log.SaveNote(result);
Response.Write(result);
Response.End();
}
}
}

使用方法

1. 在需要使用拼写检查的地方，把Shouji138.com.SpellValid.ascx控件拖进去，然后在头部加上js代码和css代码，如下：
<script type="text/javascript" src="/googiespell/AJS.js"></script>
<script type="text/javascript" src="/googiespell/googiespell.js"></script>
<script type="text/javascript" src="/googiespell/googiespell_multiple.js"></script>
<script type="text/javascript" src="/googiespell/cookiesupport.js"></script>
<link href="/googiespell/googiespell.css" rel="stylesheet" type="text/css" media="all" />

2. 在页面合适的地方加入一个拼写检查的容器DIV
<div id="global_spell_container" class="globalcontainer"></div>

3. 在页面的底部，引入控件
<uc1:Shouji138_com_SpellValid ID="tc1" runat="server"></uc1:Shouji138_com_SpellValid>

4.最后，把需要进行拼写检查的控件，进行注册一下，比如：
<script type="text/javascript">
var txt1 = "<%=txt1.ClientID%>";
var txt2 = "<%=txt2.ClientID%>";
var txt3 = "<%=TextBox3.ClientID%>";
googie5.decorateTextareas(txt1, txt2,txt3); //可以添加很多个。
</script>

使用特点
1. 功能强大，可以检查多国语言，如英语，法语，俄语等等;
2. 使用简单，只需添加简单的一些代码就可以实现页面上所有输入框的拼写检查;
3. 检查迅速，实时检查，实时返回结果;
4. 可以提供相似的单词选择。

下载和截图
欢迎各位来我的小站(恋主题:http://www.shouji138.com/)下载代码包，该控件只免费供个人学习研究之用，如果用于商业用途，请跟作者联系。
演示地址：http://www.shouji138.com/aspnet2/spellcheck/
下载地址：http://www.shouji138.com/aspnet2/files/SpellCheck.rar
效果截图：







联系方式：
QQ:441003232
Email:kefu@shouji138.com
http://www.cnblogs.com/haolinks/archive/2010/04/11/1709583.html