ckeditor 框架分析 开篇
核心文件: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); }