核心文件:ckeditor.js
ckeditor.js使用(function(){})();开篇 (定义一个函数对象并执行)
ckeditor.js默认是压缩过的,在网上找js格式化的在线工具,把ckeditor.js拷贝进去,格式化后就清晰了。(浏览器提示运行缓慢,不用理他,自管确定即可)
这类的js代码一般的有2个头疼的地方:js的组织结构和节点的扩充。
ckeditor.js的组织结构:我发现了又诸多的(function(){})();结构,hash写法,方法扩充。
对诸多节点进行了方法和属性的扩充后,让原来就有N多方法属性的js节点更增添了些复杂度。
所以,我要引入一个能观察节点下方法和属性的程序,帮助我分析。
我自己开发了一个简单的程序
取名为wt.js;
使用时嵌入到ckeditor.js的前面,在ckeditor.js的相关位置上,写入$wt(dom),dom为要分析的节点,就会出现一个此节点的属性和方法的信息框了;
/wt版本:1.0
$wbox = document.createElement("div");
$wt = function(obj){
var nms = new Array();
var vas = new Array();
for(i in obj) wt_item(i);
wt_css();
var hand = setInterval(wt_load, 10);
/css函数组
//属性数据
function wt_item(nm){
nms.push(nm);
vas.push(obj[nm]);
}
//展示设置
function wt_css(){
//展示框
css("width","700px");
css("height","500px");
css("margin-left","auto");
css("margin-right","auto");
css("position","absolute");
css("top","70px");
css("background-color","#efefef");
css("border","1px solid #999");
css("padding","13px");
css("overflow","hidden");
css("z-index","99999");
//title
wt_title();
//输入属性数据
wt_cotent();
}
//标题
function wt_title(){
var title = document.createElement("div");
css("height","23px", title);
css("border-bottom","1px solid #666", title);
css("font-size","13px", title);
css("font-weight","bold", title);
css("position","relative", title);
cls = document.createElement("div");
cls.id = "wt_cls";
css("position","absolute", cls);
css("top","-3px", cls);
css("right","-3px", cls);
css("height","13px", cls);
css("width","13px", cls);
css("padding","0px", cls);
css("line-height","13px", cls);
css("border","1px solid #666", cls);
css("text-align","center", cls);
css("font-size","11px", cls);
css("font-weight","bold", cls);
css("cursor","pointer", cls);
cls.innerHTML = "X";
title.innerHTML = "WT属性浏览";
title.appendChild(cls);
$wbox.appendChild(title);
}
//内容
function wt_cotent(){
var bo = document.createElement("div");
css("width","700px", bo);
css("height","460px", bo);
css("margin-top","10px", bo);
css("overflow","auto", bo);
var table = document.createElement("table");
css("width","680px", table);
bo.appendChild(table);
var tBody = document.createElement("tbody");
table.appendChild(tBody);
var ti = 0;
for(var i=0;i<nms.length;i++) {
if(!ti) {
var tr = document.createElement("tr");
tBody.appendChild(tr);
}
var td = document.createElement("td");
css("width","180px", td);
css("height","27px", td);
tr.appendChild(td);
var a = document.createElement("a");
css("display","block", a);
css("width","125px", a);
css("height","27px", a);
css("line-height","27px", a);
css("font-size","13px", a);
css("border-bottom","1px dotted #999", a);
css("color","#333", a);
css("text-decoration","none", a);
css("overflow","hidden", a);
a.innerHTML = nms[i];
a.href = "http://www.baidu.com/s?wd=js+"+nms[i]+"&rsv_bp=0&rsv_spt=3&inputT=625";
a.target = "_blank";
if(vas[i]==null) vas[i] = "方法";
if(!vas[i]) vas[i] = null;
a.title = vas[i];
td.appendChild(a);
ti++;
if(ti>=4) ti=0;
}
$wbox.appendChild(bo);
}
/其他函数组
function wt_load(){
try{
document.body.appendChild($wbox);
clearInterval(hand);
var cls = document.getElementById("wt_cls");
if(window.addEventListener){//Mozilla, Netscape, Firefox
cls.addEventListener('click', $wt_cls, false);
}else{//IE
cls.attachEvent('onclick', $wt_cls);
}
}catch(e){}
}
function css(css, value, dom){
if(css=="float") css = "cssFloat";
css = css.replace(/\-(\w)/g, function(all, letter){
return letter.toUpperCase();
});
if(!dom) dom = $wbox;
dom.style[css] = value;
}
}
$wt_cls = function(){ $wbox.style["display"] = "none"; }
//自定函数
function print_r(arr, e){
var arrs = "";
var len = arr.length;
if(!len){
switch(e){
case "value":
arr = arr.value;
break;
case "tagName":
arr = arr.tagName;
break;
}
arrs += "0 => "+arr+"\n";
}else{
for(var i=0;i<len;i++) {
switch(e){
case "value":
arr[i] = arr[i].value;
break;
case "tagName":
arr[i] = arr[i].tagName;
break;
}
arrs += i+" => "+arr[i]+"\n";
}
}
alert(arrs);
}