1. 最早接触的是fckeditor，那个时候tinyMCE好像是收费的（不知道有没有记错），而且fckeditor一直都比较丰富；
2. fckeditor的文档似乎更加完善；
3. 不喜欢tinyMCE的弹出窗口的体验，更喜欢fckeditor的div浮动方式，特别是查看源代码的时候。

于是，最近自己在做自己公司的站点，后台就采用了fckeditor，在此期间也遇到一些问题，特此记录。

1. ajax提交的时候，使用jquery serialize()无法获取rft文本编辑框中的内容。仔细看了看原理才知道，fckeditor采用的是iframe方式，所以js提交的时候没有触发form.submit，当然也就获取不到内容，处理的方式很简单，在提交之前，用js获取一下iframe中的内容，代码如下:
   $('#hotel_description').val( getEditorTextContents('hotel_description') );假设 hotel_description是RTF文本编辑器的ID
   getEditorTextContents的函数代码如下：
   function getEditorTextContents(EditorName) {
var oEditor = FCKeditorAPI.GetInstance(EditorName);
return(oEditor.EditorDocument.body.innerHTML);
}
2. 如何自定义上传图片程序。fckeditor本身自带有图片上传，但是有的时候并不一定能满足我们的需求，所以这个时候您可能需要fckeditor能直接调用第三方图片管理程序。假设图片程序路径是 http://www.huichuan365.com/media/
   那么php调用fckeditor的代码如下：
   BasePath = HOME_URL.'/lib/fckeditor/' ;
$oFCKeditor->Config['ImageBrowserURL'] = 'http://www.huichuan365.com/media/' ;//第三方图片程序的地址$oFCKeditor->Config['ImageBrowserWindowWidth'] =800;//第三方图片程序弹出窗口的宽度，同样的也可以定义高度
$oFCKeditor->Width = '100%' ;
$oFCKeditor->Height = '450' ;
$oFCKeditor->Create() ;
?>
   上面的的步骤可以让你在编辑器中点击图片上传的时候，自动引导上传程序到第三方网址。
   接下来的问题就是，在第三方网页中添加一个功能：当点击图片的时候， 网页自动关闭，同时图片的路径传递回当前的编辑器中，在第三方网页中的代码如下：
   function SelectFile( fileUrl )
{
// window.opener.SetUrl( url, width, height, alt);
window.opener.SetUrl( fileUrl ) ;
window.close() ;
}这段代码，官方网站也有

好了，特此记录。

在学习web相关的东西的过程中，frontpage用过几次，随后就用了dreamweaver。当年在水木清华BBS上听闻高手用文本编辑器写网页，并且宣称用存文本编辑器效率更高。当年感觉不可思议，用文本编辑器确实可以，但是不可能效率更高，那人简直就是装深沉，有现在的话说是装“13”！

今天突然想到这个事情，发现自己电脑中多年没有dw，甚至连安装程序都找不到了。原来，业余web编程的我，也早在4、5年前就放弃了可视化编辑软件了！

其实这并不是水平高的体现，引用《买油翁》的文字：“无他，唯手熟尔”！

实话实说，现在确实用纯文本编辑器速度快多了，在打开DW的时间内，可能我要做的小部分修改已经完成。web发展到现在，设计越来越简洁，用css可以随心所欲将希望的div摆在自己认为合适的地方。

各位朋友，你呢，是不是也放弃了DW这根拐杖！

预报一下：今天上午开始，在写一个简约的单用户图片管理程序，现在大约完成50%，整个程序就一个php文件，想去体验未完成版本的，请去这里0bad.com

首先引入jQuery库

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>

然后编写验证表单的函数

function valid(s){
var e=s.split('&');var i=0;
while( i<e.length ){
var tmp=e[i].split('=');
var el = "#"+tmp[0];
var fv =$(el).val();
var tp = tmp[1];
$(el).next().hide();//将表单域后面的出错提示隐藏掉
if( tp == "text" ){
if( fv == "" ) {
$(el).next().show(); //若表单域为空，则显示出错提示
return false; //返回false，以下相同
}
}
if( tp == "int" ){
if( isNaN( fv ) ) {
$(el).next().show();
return false;
}
}
if( tp == "email" ){
var res = new RegExp("^([A-Za-z0-9_|-]+[.]*[A-Za-z0-9_|-]+)+@[A-Za-z0-9|-]+([.][A-Za-z0-9|-]+)*[.][A-Za-z0-9]+$","ig");
if (!res.test(fv)){
$(el).next().show();
return false;
}
}
i++;
}
}

使用方法距离：

<input size="20" type="text" name="email" id="email"  />
<span class="errormsg">E-mail is not valid</span>
<input type="password" name="password" id="password"    />
<span class="errormsg">password is required</span>
<input type="submit" value="Login" onClick="return valid('email=email&password=text')"/>

valid的参数说明，若表单域中的input或者select等等需要是email格式，则参数为xxx=email,数字格式为xxx=int,其他非空文本格式则为xxx=text,验证多个表单域用&将其连接起来，如name=text&mail=email&age=int

案例可以参见生活点滴虚拟主机的注册表单案例，当然，这个案例更加智能，但是不如本文的代码效率高和灵活，所以才有了这篇日志。

1. 做几个不同的分站，通过用户第一次的选择将用户定位到相应语言的分站；
2. 编辑网站内容的时候，添加多种语言，然后通过用户的选择从数据库中获取对应的语言；
3. 添加一个google翻译按钮，用户自行选择google翻译查看不同语言的版本；
4. 利用google 翻译接口，通过js实时翻译网页文字，cosbeta今天打算要介绍的就是这种方法；

上面4种方法的优缺点我这里就不多描述了，相信大家都很清楚了。应客户的要求，再加上翻译方便和翻译的通用性的需求，cosbeta决定用第4种方法为客户解决多语言的问题。

最开始cosbeta的解决办法是想通过程序模拟客户端去直接读取google对当前页面翻译的内容，从而实现页面的多语言版本。比如用户访问http://storyday.com?p=1，当用户需要访问日语版时，cosbeta就将此页面通过php发送给google的网页翻译接口，然后将翻译的结果读取出来，显示在当前的页面上。然而后来cosbeta发现这种方式是不可取的，一方面google对客户端的限制比较严格，用php模拟客户端可能会导致数据获取的失败，另外一方面，google并没有推荐这种方式，所以很容易导致翻译失效。

后来cosbeta就转向了google的翻译API，配上jquery对Dom灵活的操作，很容易就解决了这个问题。

首先制作页面的时候，我将所有需要翻译的tag都添加了一个css，名为multilang,比如<a href=”#” class=”multilang”>关于我们</a>，在网页的末尾用jquery遍历dom，逐一翻译然后替代原来的文本，按照下面的步骤操作，展示一个例子给大家：

1. 添加google ajax api到网页的顶端,
   <script src="http://www.google.com/jsapi?key=GOOGLEAPI" type="text/javascript"></script>
<script language="Javascript" type="text/javascript">
//<![CDATA[
google.load("jquery", "1.2.6");
google.load("language", "1");
//]]>
</script>这段代码同时将google的翻译接口和jquery js库引入了网页当中。代码中的GOOGLEAPI需要在这里申请。
2. 给所有需要翻译的标签添加class=”multilang”，若是标签里面已经有class=”xxx”只需要变成 class=”xxx multilang”即可;
3. 添加读写cookie的JS代码，目的是为了记住当前用户语言的选择：
   var aCookie = document.cookie.split("; ");
function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(CookieEleName)
{
var cookieValue = "";
if( aCookie ==null ) return cookieValue;
for (var i=0; i < aCookie.length; i++){
var CookieArray = aCookie[i].split("=");
if (CookieEleName == CookieArray[0]){
cookieValue = unescape(decodeURI(CookieArray[1]));
}
}
return cookieValue;
}

4. 撰写google翻译函数
   function trans(obj,lang){//调用google 翻译
google.language.translate(obj.html(), "", lang, function(result) {
if (!result.error) {
var container = document.getElementById("translation");
obj.html( result.translation );
}
});
}
function transMe(lang){//遍历dom，翻译整个页面
$(".multilang").each(function(i){
trans($(this),lang);    });
}
function initLang(){//定义初始化翻译，在页面调用的时候翻译
var lang=readCookie('lang');
if( lang.length > 1){
transMe(lang);
}}
function Sl(l){createCookie('lang',l,1000);transMe(l);}//定义函数sl=switchlanguage翻译本页，在需要翻译的地方调用这个js函数即可

5. 引入上面的js，在页面最顶端<script>window.onload=initLang;</script>
6. 至此，便可以随心所欲翻译页面了。其实原理很简单：1.引入jquery和google 翻译库 2.编写翻译函数，用户点击对应语言的时候翻译当前页，并且记录当前的lang到cookie 3.初始化页面的时候根据cookie选择性的翻译当前页面。

下面的iframe是案例：

1. 广州电信封路由-ADSL老是断网 2008-01-26
2. Bluehost这两天奇慢无比2008-04-10
3. 广州电信ADSL的3月经又来了2008-06-28
4. 广州电信ADSL继续抽风 2009-01-04

Reply from 220.181.31.8: bytes=32 time=42ms TTL=245
Reply from 220.181.31.8: bytes=32 time=42ms TTL=245
Reply from 220.181.31.8: bytes=32 time=41ms TTL=245
Reply from 220.181.31.8: bytes=32 time=42ms TTL=245
Reply from 220.181.31.8: bytes=32 time=41ms TTL=245
Reply from 220.181.31.8: bytes=32 time=43ms TTL=245
Reply from 220.181.31.8: bytes=32 time=41ms TTL=245
Reply from 220.181.31.8: bytes=32 time=44ms TTL=245
Request timed out.
Request timed out.
Request timed out.
Request timed out.
Request timed out.
Reply from 220.181.31.8: bytes=32 time=42ms TTL=245
Request timed out.
Reply from 220.181.31.8: bytes=32 time=60ms TTL=245
Reply from 220.181.31.8: bytes=32 time=42ms TTL=245
Request timed out.
Reply from 220.181.31.8: bytes=32 time=92ms TTL=245
Request timed out.
Reply from 220.181.31.8: bytes=32 time=48ms TTL=245
Request timed out.
Reply from 220.181.31.8: bytes=32 time=240ms TTL=245
Request timed out.

Ping statistics for 220.181.31.8:
Packets: Sent = 302, Received = 227, Lost = 75 (24% loss),
Approximate round trip times in milli-seconds:
Minimum = 41ms, Maximum = 628ms, Average = 52ms
Control-C

wikipedia中对于httpOnly的描述如下：

`HttpOnly’:

Set-Cookie: RMID=732423sdfs73242; expires=Fri, 31-Dec-2010 23:59:59 GMT; path=/; domain=.example.net; HttpOnly

When the browser receives such a cookie, it is supposed to use it as usual in the following HTTP exchanges, but not to make it visible to client-side scripts.[21] The `HttpOnly` flag is not part of any standard, and is not implemented in all browsers. Note that there is currently no prevention of reading or writing the session cookie via a XMLHTTPRequest.[36]

所以，若是网站基于cookie而非服务器端的验证，请最好加上HttpOnly，当然，目前这个属性还不属于任何一个标准，也不是所有的浏览器支持，另外知名的wordpress程序也已经更改了cookie的属性为httpOnly。

javascript无法读取HttpOnly cookies，若想在js中获取cookie的属性该如何处理呢？

cosbeta也没有什么比较好的办法，所以只有告诉大家都绝招：还得动用服务器端脚本读出cookie，然后用输出js代码，或者用ajax去获取服务器端程序读出的cookie值。

于是cos-html-cache因此升级了。

我想上面的html代码应该不用解释了吧，否则这篇文章你也没有看得必要了哈，下面是css的实现，其实css是最难搞的，目前搞定是实现目录式树形，其他树状也是很简单的，无非就是改变一下css

a:link,a:visited{font-size:12px;
color:#094477;text-decoration:none;
}
a:link:hover,a:visited:hover{
color:#000cf;text-decoration:underline;
}
ul.folder{padding:0;margin:0;list-style:none;/*重置ul的margin和padding，否则打死都无法兼容FF和IE*/}
li.folder{
background:#fff url(folderbg.png) no-repeat 0 0;padding:0px 0 0px 14px;
margin:0 2px;
text-indent:20px;
/*folder背景，目前放到是windows目录背景，如果是其他树形，用其他背景图片替代即可*/
}
li.folder-op{background:#fff url(folderbg-op.png) no-repeat 0 0;}
.disnone{
display:none;
}/*这是一个公共的css class，表示隐藏该元素*/

下面开始介绍重点，那就是js的实现，可能这个重点会让你失望，毕竟代码才那么简单的几行，当然在运用jquery之前肯定是要引入jquery库文件的，本例子中直接引用的本blog（生活点滴）中的jquery库：

下面是js代码，解释依然在注释中：
function Exp(obj){
var html_element = $(obj).parent('.folder');/*获取当前点击的父dom，在本例子中获取的dom节点将是 “第一级目录所在的li.folder”*/
var sub_element = $(html_element).children(".folder"); ;/*根据当前的父dom，获取本级的子dom*/
if( html_element.attr('class').indexOf('folder-op') != -1 ){
/*css class .folder-op表示当前已经展开的类，如果展开，则前面的+背景变成-背景，具体可以在后面的例子中看到
如果class中含有该类，则表示当前已经展开，所以下面的两行的任务是：1.隐藏该目录，2.remove掉此css class
*/
html_element.removeClass('folder-op');
sub_element.hide();
}
else{
/*否则，添加表示目录已经展开的类，展示该目录*/
html_element.addClass('folder-op');
sub_element.show(500);
}
}
对，对于js就只需要上面的几行，太简单了，对吧,下面是例子：

上面例子中包含文件有：tree-jquery！
有些细节是在css中控制的，所以如果你需要其他样式请自行修改css，如下面的另外一个例子：（例子中的虚线不完美，特别没个分支最后的那一行, 所以，在css的运用上发挥你的聪明才智吧）：

————end————————

在上次的日志中，我谈到这样一个看法：服务器端程序是负责输出文本，也包括输出javascript，而javascript则是负责操作浏览器。今天我就大致的说一说javascript是如何操作浏览器的。在javascript中，我们可以将一切都看作对象（各位看官，别看见对象就害怕，其实js的这个对象没有那么恐怖）。首先我们来举一个通俗的例子，比如我们想叫一个小妹妹把一个饭碗举起来，用javascript可以这样表达：

人.女人.小妹妹.右手.捧起(饭碗)。

我们看看这代代码，首先找到对象人.然后引用人的成员.女人，最后定位到右手，引用函数“捧起”，参数就是饭碗了。

好了，所以，你知道了一些常见的对象表述，便可以灵活的运用js来操作了。下面介绍一下常用的操作：
alert('hi');//警示消息，内容是"hi"，当然hi也可以是其他变量
window.close();//关闭窗口
document.getElementById("my-id").value = "123";//给id="my-id"这个元素赋值 .value只对表单有效
document.getElementById("my-id").innerHTML = "123";//如果 id元素是html区域，如div span li等等
document.getElementById("my-id").innerHTML = "这里也可以是html代码";
是不是很简单呢，注意上面代码中大小写不能错误！

今天就写这么简单的几行，因为电池快用尽了，其实知道对象操作的基本思想之后，你甚至可以直接用javascript框架了。

web编程难煞人，一只红杏出墙来；

切换不用flash，一只红杏出墙来；

上面的文不对题，不合逻辑，不过，不合逻辑是当今的主旋律，所以在写这个日志之前，我吟诗几首，做了几个俯卧撑，这才正二八经的开始。

下面这个效果大家都见过吧，比如迅雷的影片介绍，但是有很多是用flash来完成的，当然，也可以用html+css来完成
，下面是代码，具体的解释请看代码中的注释：





当然，整个切换过程比较生硬，不过利用jQuery的fade in fade out效果就可以轻松的实现柔和切换

thanks to pantao.name 发现了一个bug，已经修正，见注释部分。