【分享教程贴】解析UCH1.5中，群组功能增加编辑器。（html+js详解）

感觉好久没写东西了，虽然很多人近期对我有意见，呵呵，不过没所谓，还是老话，kongkang还值得那么多人关注，值得大家一波又一波的支持或者鄙视，这就是我该满足的地方。

群组功能发帖时候增加编辑器，其实并不是很复杂，只不过我们要理解，为什么要这样修改代码。
*可能有些听不懂，不过不会影响修改，多学点东西总是好的吧？

首先，我们解析一下blog的编辑器。
看模板文件夹下cp_blog.htm里面的这段代码：

1.                                 <textarea class="userData" name="message" id="uchome-ttHtmlEditor" style="height:100%;width:100%;display:none;border:0px">$blog[message]</textarea>
   
2.                                 <iframe src="editor.php?charset=$_SC[charset]&allowhtml=$allowhtml" name="uchome-ifrHtmlEditor" id="uchome-ifrHtmlEditor" scrolling="no" border="0" frameborder="0" style="width:100%;border: 1px solid #C5C5C5;" height="400"></iframe>

复制代码

第一步呢，我们先要读懂这两行代码：
这就是编辑器的比较核心的部分，用一个隐藏的textarea来提交信息，用js提取框架iframe里面的编辑内容，而iframe里面的部分是编辑器页面。
display:none 表示用css隐藏了textarea，看不到但是提交信息是可以发出去的。
我们会发现，textarea的iduchome-ttHtmlEditor和iframe里面的name和id都很像，对，这两个能合并在一起就是用这个挂钩的，当然，还要借助于js实现。

第二步，再看提交的时候，触发了什么，请看这两段代码，还是那个文件。

1. <input type="button" id="blogbutton" name="blogbutton" value="提交发布" onclick="validate(this);" style="display: none;" />

复制代码

1. <input type="button" id="issuance" onclick="document.getElementById('blogbutton').click();" value="保存发布" class="submit" />

复制代码

如果刚才认真听课的同学都发现了，“display: none”又一次使用到了隐藏。
但是提交的时候更有趣：
下面的按钮触发的是上面按钮的动作，怎么做到的呢？

1. onclick="document.getElementById('blogbutton').click();"

复制代码

这行代码表示在点击的时候，触发一个js事件：document.getElementById('blogbutton').click();
而这个事件的js实际上就是点击第一个按钮的动作，等同于触发了第一个按钮的：

1. onclick="validate(this);"

复制代码

这个部分，那么我们就找到了提交的时候，一定会包含处理编辑器的js函数：validate

搜索刚才那个文件中的代码，我们很容易找到这段：

1.         function validate(obj) {
   
2.             var subject = $('subject');
   
3.             if (subject) {
   
4.                     var slen = strlen(subject.value);
   
5.                 if (slen < 1 || slen > 80) {
   
6.                     alert("标题长度(1~80字符)不符合要求");
   
7.                     subject.focus();
   
8.                     return false;
   
9.                 }
   
10.             }
    
11. 
    
12.             if($('seccode')) {
    
13.                         var code = $('seccode').value;
    
14.                         var x = new Ajax();
    
15.                         x.get('cp.php?ac=common&op=seccode&code=' + code, function(s){
    
16.                                 s = trim(s);
    
17.                                 if(s != 'succeed') {
    
18.                                         alert(s);
    
19.                                         $('seccode').focus();
    
20.                                    return false;
    
21.                                 } else {
    
22.                                         uploadEdit(obj);
    
23.                                         return true;
    
24.                                 }
    
25.                         });
    
26.             } else {
    
27.                     uploadEdit(obj);
    
28.                     return true;
    
29.             }
    
30.         }

复制代码

这个东西什么意思呢？我们大概看看，我也作简要解释：
function是函数必须的部分，后面表示 validate(obj)函数名和所传递进来的参数。参数是一个对象，所以用obj来命名，不是语法必须，只是比较方便理解。
然后定义了另外一个对象，在函数内部： var subject = $('subject');
表示将id为'subject'的部分当作对象给前面的变量，听不懂这些术语没所谓，以后会明白，不会影响这次你学习哦。

有这样的对象有啥用啊？
这样的对象可以直接指向某个DOM的节点，更简单的说法是方便操作部分指定的html，哈哈，这样理解了吧？

再看这个js函数。我用注释来说明每一行做什么：

1.         function validate(obj) {//创建函数和函数名，声明需要传入什么参数
   
2.             var subject = $('subject');//设定一个函数内的变量，方便后面用，指向了id为subject的html部分。
   
3.             if (subject) {//如果有这个对象，可以理解成，如果有这个html的话
   
4.                     var slen = strlen(subject.value);//读取这个html部分的value值的长度
   
5.                 if (slen < 1 || slen > 80) {//判断长度是否超过80或者小于1.
   
6.                     alert("标题长度(1~80字符)不符合要求");//提示不合法
   
7.                     subject.focus();//将光标焦点放到指定的对象上
   
8.                     return false;//返回这个函数的返回值为否（假），目的是告诉浏览器不要继续表单提交了，有问题啦。如果运行到这里，整个函数结束，不再继续运行。但是，刚才的判断部分如果没有进入这个大括号的话，程序继续运行。细节部分参考一下相关描述js函数的书籍或资料，不详细说了。
   
9.                 }
   
10.             }
    
11. 
    
12.             if($('seccode')) {//这个是判断'seccode'部分的，有ajax的部分，跳过大部分，我只简单说，我们直接谈中心部分。
    
13.                         var code = $('seccode').value;//读取'seccode'的值
    
14.                         var x = new Ajax();//创建一个ajax的实例，理解为要做ajax之前的热身，不然程序容易抽筋，那就不能继续了，呵呵
    
15.                         x.get('cp.php?ac=common&op=seccode&code=' + code, function(s){//将'cp.php?ac=common&op=seccode&code=' + code作为ajax异步传输读取的地址，返回的是这个地址给的结果，也就是s
    
16.                                 s = trim(s);//安全处理s
    
17.                                 if(s != 'succeed') {//如果s不是'succeed'的话，则运行下面的部分。
    
18.                                         alert(s);//警告，内容就是s，估计如果s不是'succeed'的话，会直接返回错误提示。
    
19.                                         $('seccode').focus();//呵呵，上面见过，将鼠标光标放到'seccode'上。
    
20.                                    return false;//返回别继续的指令，刚才说过。
    
21.                                 } else {//否则运行（也就是说s的内容就是'succeed'）
    
22.                                         uploadEdit(obj);//哈哈，bingo~~~就是要照这个，更新编辑器的函数
    
23.                                         return true;//告诉浏览器，哈哈，正确了，提交吧，我拿到了编辑器的数据啦~~~
    
24.                                 }
    
25.                         });
    
26.             } else {//这两行自己理解一下，自己看看括号是哪里的if和else，如果不知道if-else是什么，参考我之前发过的教程。
    
27.                     uploadEdit(obj);
    
28.                     return true;
    
29.             }
    
30.         }

复制代码

这样我们就找到要得部分了，估计现在有些朋友会晕了，“改一个编辑器这么麻烦啊？”
是啊，如果你熟练的话，其实也不会特别麻烦，所以提醒某些喜欢免费的朋友，无论大家分享什么东西，都要懂得感恩，很多细节的部分你是看不到的，但是很有可能人家用心坐了很久，扯远了，我们继续哦

找到刚才那个地方，也就是uploadEdit(obj);
这还不够，你并不了解他具体是怎么运行的，确认一下，看看他在那里呢？

找了这个文件没有发现声明这个函数的部分，也就是没有找到 function uploadEdit

再看看代码，发现这个：

1. <script language="javascript" src="image/editor/editor_function.js"></script>

复制代码

*html中包含js的一种方法，具体参考html相关书籍和资料

好，开心吧，为什么呢？因为这个就是编辑器js的函数集文件了，马上打开看看吧，很快找到（第一个函数就是啊）：

1. function uploadEdit(obj) {
   
2.         mainForm = obj.form;
   
3.         forms = $('attachbody').getElementsByTagName("FORM");
   
4.         albumid = $('uploadalbum').value;
   
5.         edit_save();
   
6.         upload();
   
7. }

复制代码

edit_save();？？？这个就是保存编辑器内容的东西吧，答对，加十分，哈哈

我们拿出来这个函数直接用，因为刚才那个文件已经引用过这个文件了，也就是刚才那句代码：

1. <script language="javascript" src="image/editor/editor_function.js"></script>

复制代码

怎么直接用，估计你也会了，复制，粘贴呗……

返回cp_blog.htm文件，我们再次理顺这个流程，我考虑将具体代码修改部分留给各位朋友，多测试，一定会有人做出来的，并不是很难。

编辑器运行的过程是这样的：
1、用户首先在这部分使用编辑器输入了想要的内容，编辑器直接呈现了效果，但是资料还是在iframe里面，没有传送到textarea部分：

1.                                 <textarea class="userData" name="message" id="uchome-ttHtmlEditor" style="height:100%;width:100%;display:none;border:0px">$blog[message]</textarea>
   
2.                                 <iframe src="editor.php?charset=$_SC[charset]&allowhtml=$allowhtml" name="uchome-ifrHtmlEditor" id="uchome-ifrHtmlEditor" scrolling="no" border="0" frameborder="0" style="width:100%;border: 1px solid #C5C5C5;" height="400"></iframe>

复制代码

2、用户继续编辑其他的部分，当要提交的时候，用一个隐藏按钮提交内容：

1. <input type="button" id="blogbutton" name="blogbutton" value="提交发布" onclick="validate(this);" style="display: none;" />

复制代码

1. <input type="button" id="issuance" onclick="document.getElementById('blogbutton').click();" value="保存发布" class="submit" />

复制代码

3、触发了js函数validate，这个函数又一次触发了编辑器更新的函数uploadEdit。

1.         function validate(obj) {//创建函数和函数名，声明需要传入什么参数
   
2.             var subject = $('subject');//设定一个函数内的变量，方便后面用，指向了id为subject的html部分。
   
3.             if (subject) {//如果有这个对象，可以理解成，如果有这个html的话
   
4.                     var slen = strlen(subject.value);//读取这个html部分的value值的长度
   
5.                 if (slen < 1 || slen > 80) {//判断长度是否超过80或者小于1.
   
6.                     alert("标题长度(1~80字符)不符合要求");//提示不合法
   
7.                     subject.focus();//将光标焦点放到指定的对象上
   
8.                     return false;//返回这个函数的返回值为否（假），目的是告诉浏览器不要继续表单提交了，有问题啦。如果运行到这里，整个函数结束，不再继续运行。但是，刚才的判断部分如果没有进入这个大括号的话，程序继续运行。细节部分参考一下相关描述js函数的书籍或资料，不详细说了。
   
9.                 }
   
10.             }
    
11. 
    
12.             if($('seccode')) {//这个是判断'seccode'部分的，有ajax的部分，跳过大部分，我只简单说，我们直接谈中心部分。
    
13.                         var code = $('seccode').value;//读取'seccode'的值
    
14.                         var x = new Ajax();//创建一个ajax的实例，理解为要做ajax之前的热身，不然程序容易抽筋，那就不能继续了，呵呵
    
15.                         x.get('cp.php?ac=common&op=seccode&code=' + code, function(s){//将'cp.php?ac=common&op=seccode&code=' + code作为ajax异步传输读取的地址，返回的是这个地址给的结果，也就是s
    
16.                                 s = trim(s);//安全处理s
    
17.                                 if(s != 'succeed') {//如果s不是'succeed'的话，则运行下面的部分。
    
18.                                         alert(s);//警告，内容就是s，估计如果s不是'succeed'的话，会直接返回错误提示。
    
19.                                         $('seccode').focus();//呵呵，上面见过，将鼠标光标放到'seccode'上。
    
20.                                    return false;//返回别继续的指令，刚才说过。
    
21.                                 } else {//否则运行（也就是说s的内容就是'succeed'）
    
22.                                         uploadEdit(obj);//哈哈，bingo~~~就是要照这个，更新编辑器的函数
    
23.                                         return true;//告诉浏览器，哈哈，正确了，提交吧，我拿到了编辑器的数据啦~~~
    
24.                                 }
    
25.                         });
    
26.             } else {//这两行自己理解一下，自己看看括号是哪里的if和else，如果不知道if-else是什么，参考我之前发过的教程。
    
27.                     uploadEdit(obj);
    
28.                     return true;
    
29.             }
    
30.         }

复制代码

4、我们追寻找到那个函数，终于了解，最终更新编辑器的中心函数是edit_save();

1. <script language="javascript" src="image/editor/editor_function.js"></script>

复制代码

1. function uploadEdit(obj) {
   
2.         mainForm = obj.form;
   
3.         forms = $('attachbody').getElementsByTagName("FORM");
   
4.         albumid = $('uploadalbum').value;
   
5.         edit_save();
   
6.         upload();
   
7. }

复制代码

我们知道了这些，就可以照猫画虎的制作出来任何地方的编辑器了。

附加解释一下edit_save()的内部结构，有朋友可能会问到，还是用注释来解释(之前讲过的部分就不说了，仔细看着个帖子就好)：

1. //提交保存
   
2. function edit_save() {
   
3.         var p = window.frames['uchome-ifrHtmlEditor'];//见下一行
   
4.         var obj = p.window.frames['HtmlEditor'];//和上面那句代码一起创建一个对象，指向了'uchome-ifrHtmlEditor'部分
   
5.         var status = p.document.getElementById('uchome-editstatus').value;//读取了'uchome-ifrHtmlEditor'内'uchome-editstatus'部分的值，用返回值来继续下面的判断
   
6.         if(status == 'code') {//如果是code的话(英汉字典：code=代码)
   
7.                 $('uchome-ttHtmlEditor').value = p.document.getElementById('sourceEditor').value;//将html（也就是编辑器内生成的html）写入那个id为'uchome-ttHtmlEditor'的textarea内部，这样的话，提交表单就不是空值了
   
8.         } else if(status == 'text') {//如果是text的话(英汉字典：text=文本)
   
9.                 if(is_ie) {//如果在ie浏览器下，这个is_ie是这个js的全局变量，是有其他代码判断后生成的，不是js语言内置的，这里可能会有朋友乱用，说明一下
   
10.                         obj.document.body.innerText = p.document.getElementById('dvtext').value;
    
11.                         $('uchome-ttHtmlEditor').value = obj.document.body.innerHTML;//这两句都是将文本写入指定区域
    
12.                 } else {//如果是其他浏览器
    
13.                         obj.document.body.textContent = p.document.getElementById('dvtext').value;
    
14.                         var sOutText = obj.document.body.innerHTML;
    
15.                         $('uchome-ttHtmlEditor').value = sOutText.replace(/\r\n|\n/g,"<br>");//类似上面的，将文本写入指定区域
    
16.                 }//这两个不同的部分很典型的体现了js需要写出来不同浏览器兼容的代码，并不是在ie下成功，就在任何地方运行成功，这个是做产品时候的细节部分，也是最基本的，其实很多时候程序是否好坏，这些细节地方体现的最多，但是不用到这里你看不出来开发者的功力，虽然只是一个非常基本和初级的地方，我也想这样拓展说一下，做出来一个功能其实并不是很难，麻烦的是后期测试和修改bug时候，有时候开发时间如果是10的话，测试和后期整理代码要到30，这样1比3的比例和一般人想象还是有出入的。
    
17.         } else {//如果是其他类新，则直接写入
    
18.                 $('uchome-ttHtmlEditor').value = obj.document.body.innerHTML;//参考前面注释：写入值
    
19.         }
    
20.         backupContent($('uchome-ttHtmlEditor').value);//这个是方便下次恢复数据的代码。
    
21. }

复制代码

好了，整理了半天，希望对各位有所帮助。
哪位如果通过kongkang的简单讲解做出来这个功能，记得发布给大家就好了，呵呵。
感谢支持我的人一直支持我，你们是我继续努力下去的动力~！！！
也感谢那些给我提出问题的朋友，无论怎么样，我是可以理解的，你们是我成长的动力。

[ 本帖最后由 kongkang 于 2008-10-6 13:34 编辑 ]

好啊好啊，，，好长啊

好长啊~~多谢你！！　　得要好好研究一下～～

属于开发经验之谈。
整天瞎喊叫免费的人因该多学习学习。
想做网站就不要怕埋头刻苦学习。

原帖由 nowbe 于 2008-10-6 13:31 发表
属于开发经验之谈。
整天瞎喊叫免费的人因该多学习学习。
想做网站就不要怕埋头刻苦学习。

晕，你QQ不上线，居然在这里潜水……

好东西，先顶一下！！！

前排支持！~~~~~~~~~~~~~

dingdingding(::51::)

好东西，学习

   支持下