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() ;
}这段代码，官方网站也有

好了，特此记录。

首先引入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

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

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框架了。

当然仅仅是简单的分享，所以有朋友肯定还嫌不够，需要了解一下原理，那么下面开始介绍原理：

首先，表单得按照特定的方式输入，这样js才能按照一定的格式去遍历元素，那么在本例子中，格式如下：



下面是脚本的部分




其实，通过jQeury进行html的DOM遍历是相当方便的，所以熟悉jquery之后，编写其他扩展到函数或者class是相当的轻松了。本例子的演示地址在这里，不想直接copy本文代码的，请看示例的源文件即可。

1. 再写一个函数，譬如function loadFunc(){ myFunc(var1,var2) },然后window.onload = loadFunc;
2. 使用匿名函数。onload =function(){myFunc(var1,var2)}

足够了，就这两种方法。

如果稍微熟悉一点js，实现这个效果一点都不困难，肯定有人也这样做过。我这里简单的说一下原理和实现方法。我们根据是否曾经留言来判断当前的访问用户是新用户还是老用户，当然这样可能不准确，因为凡是潜水的老用户都会被当作新用户。在wordpress中，访客留言之后都会自动生成一个cookie，用来记录当前留言者的信息，所以我们可以在js脚本文件中判断cookie是否存在，如果存在则隐藏掉广告，否则则显示之，下面是代码介绍。



然后在广告的后面写上下面的js代码即可
//显示某个标签的函数
function showIT(ele){
if(document.getElementById(ele) != null )document.getElementById(ele).style.display='';
}
var custom_author_cookie = "< ?php echo 'comment_author_'.COOKIEHASH;?>";
if( readCosBetaCookie(custom_author_cookie).length < 1 ){
showIT('adv');//adv是当前广告所在DIV的ID
}

大功告成！

wordpress模板代码

通过上面的代码，便可以将两级分类获取出来。

css代码根据个人模板不同的风格，你可能要对某些参数进行修改，下面是代码，解说将在注释中。
ul#navsite,
#navsite ul {
font: 12px Verdana, sans-serif;
padding: 0;
margin: 0;
list-style: none;
}
#navsite li {
float: left; /* 将li标签水平排列 */
text-align: center;
}

av_a ul li ul.children li.current-cat A ,#nav_a ul li ul.children li.current-cat-parent A {
BACKGROUND: green;
color:#000;
font-weight:bold;
}
#nav_a ul li ul li A {
display:block;
padding-top:4px;
width:130px;
border:0;
border-top:1px solid #999900;
text-indent:4px;
color:#ffffff;
height:25px;
BACKGROUND: url() #99cc00 no-repeat 0px 0px;
}

javascript代码由于IE不兼容某些css描述,因此这里要用到javascript来弥补之不足,代码如下:

建议需要使用的兄弟直接在实例中进行修改:menu.html

鸣谢:部分css代码借鉴了先辈的代码,而javascript则是直接copy过来使用的,由于很久以前使用的,所以忘记css部分代码和js全部代码的原创者是谁了.

<div id=”test”>
<div id=”intest”>html</div>
</div>
<input type=”button” value=”click me” onClick=”alert(document.getElementById(‘test’).innerHTML)” />

所以正常显示应该是Firefox中“<div id=”intest”>html</div>”而不是IE中的<DIV id=intest>html</DIV>

测试如下：