editor.js

xdHtmlEditor源码

		CD.func.LoadPos(id);
		CD.func.execCommand(id,"createlink",u);
	},
	InsertImage : function(id){
		var p = CD.$(id+"_picture").value;
		if(!p || p=="http://") return false;
		CD.func.LoadPos(id);
		CD.func.execCommand(id,"InsertImage",p);
	},
    SavePos : function(id) {
        var win = CD.g[id].iframeWin;
        var doc = CD.g[id].iframeDoc;
        var sel = win.getSelection ? win.getSelection() : doc.selection;
        var range;
        try {
            if (sel.rangeCount > 0) {
                range = sel.getRangeAt(0);
            } else {
                range = sel.createRange ? sel.createRange() : doc.createRange();
            }
        } catch(e) {}
        if (!range) {
            range = (CD.browser) ? doc.body.createTextRange() : doc.createRange();
        }
        CD.g[id].selection = sel;
        CD.g[id].range = range;
    },
	LoadPos : function(id){
		if(CD.browser && CD.g[id].range){
			CD.g[id].range.select();
			CD.g[id].range = null;
		}
	},
	fHide : function(id,k){
		for(var i=0;i<CD.lang["items"].length;i++){
			if(CD.lang["items"][i][0] == "picture" && CD.g[id].use != true) continue;
			if("bold,italic,underline,-".indexOf(CD.lang["items"][i][0])==-1 && i!=k) CD.$(id+"_"+i+"_prompt").style.display = 'none';
		}
	},
	fDisp : function(id){
		CD.$(id).style.display = CD.$(id).style.display != 'block' ? "block" : "none";	
	},
	BMouse : function(obj, flag){
		if (obj.title == "间隔线") return;
		obj.className = (flag == 0 ? "editor_btn_mover" : flag == 1 ? "editor_btn_mdown" : "editor_btn");
	},
	Mcolor : function(obj,t){
		obj.className = !t ? "editor_menu_mover" : "editor_menu";
	},
	toolprompt : function(id,k,t){
		if("bold,italic,underline,-".indexOf(t)!=-1) return "";
		var d = "<div unselectable=on  id='"+id+"_"+k+"_prompt' class='editor_prompt'>";
		switch(t){
		    case "fontname":
				for(var i=0;i<CD.lang["font"].length;i++){
					d += "<div class='editor_menu' title='"+CD.lang["font"][i][1]+"' onmouseover='CD.func.Mcolor(this)' onmouseout='CD.func.Mcolor(this,1)' ";
					d += " unselectable=on style='width:100px;font:normal 12px "+CD.lang["font"][i][0]+"' ";
					d += " id='"+id+"_"+i+"_"+t+"' para='"+CD.lang["font"][i][0]+"'>";
					d += CD.lang["font"][i][1]+"</div>";
				}
			break;
			case "fontsize":
				for(var i=0;i<CD.lang["size"].length;i++){
					d += "<div class='editor_menu' title='"+CD.lang["size"][i][2]+"' onmouseover='CD.func.Mcolor(this)' onmouseout='CD.func.Mcolor(this,1)' ";
					d += " unselectable=on style='width:100px;font-size:"+CD.lang["size"][i][1]+"' ";
					d += " id='"+id+"_"+i+"_"+t+"' para='"+CD.lang["size"][i][0]+"'>";
					d += CD.lang["size"][i][2]+"</div>";
				}
			break;
			case "alignmode":
				for(var i=0;i<CD.lang["alignmode"].length;i++){
					d += "<div style='width:100px;' class='editor_menu' onmouseover='CD.func.Mcolor(this)' onmouseout='CD.func.Mcolor(this,1)' ";
					d += " unselectable='on' id='"+id+"_"+i+"_"+t+"' para='"+CD.lang["alignmode"][i][0]+"'>";
					d += "  <div unselectable='on' style='background:url("+CD.g[id].root+"images/editoricon.gif) -"+CD.lang["alignmode"][i][1]+"px 0;";
					d += "width:20px;height:17px;float:left;margin:"+CD.lang["alignmode"][i][3]+";' title='"+CD.lang["alignmode"][i][4]+"' ";
					d += " id='"+id+"_"+i+"_"+t+"' para='"+CD.lang["alignmode"][i][0]+"'></div>";
					d += CD.lang["alignmode"][i][4]+"</div>";
				}
			break;
			case "serial":
			   for(var i=0;i<CD.lang["serial"].length;i++){
					d += "<div style='width:100px;' class='editor_menu' onmouseover='CD.func.Mcolor(this)' onmouseout='CD.func.Mcolor(this,1)' ";
					d += " unselectable='on'  id='"+id+"_"+i+"_"+t+"' para='"+CD.lang["serial"][i][0]+"'>";
					d += "  <div unselectable='on' style='background:url("+CD.g[id].root+"images/editoricon.gif) -"+CD.lang["serial"][i][1]+"px 0;";
					d += "width:20px;height:17px;float:left;margin:"+CD.lang["serial"][i][3]+";' title='"+CD.lang["serial"][i][4]+"' ";
					d += " id='"+id+"_"+i+"_"+t+"' para='"+CD.lang["serial"][i][0]+"' ></div>";
					d += CD.lang["serial"][i][4]+"</div>"; 
			   }
			break;
			case "indent":
			   for(var i=0;i<CD.lang["indent"].length;i++){
					d += "<div style='width:100px;' class='editor_menu' onmouseover='CD.func.Mcolor(this)' onmouseout='CD.func.Mcolor(this,1)' ";
					d += " unselectable='on' id='"+id+"_"+i+"_"+t+"' para='"+CD.lang["indent"][i][0]+"'>";
					d += "  <div unselectable='on' style='background:url("+CD.g[id].root+"images/editoricon.gif) -"+CD.lang["indent"][i][1]+"px 0;";
					d += "width:20px;height:17px;float:left;margin:"+CD.lang["indent"][i][3]+";' title='"+CD.lang["indent"][i][4]+"' ";
					d += " id='"+id+"_"+i+"_"+t+"' para='"+CD.lang["indent"][i][0]+"'></div>";
					d += CD.lang["indent"][i][4]+"</div>"; 
			   }
			break;
			case "picture" :
			   d += "<div unselectable='on' style='width:325px;margin:8px 10px;'>";
			   d += "  <div unselectable='on'>选择上传：";
			   d += "<iframe frameborder='0' scrolling='no' src='"+CD.g[id].root+"upload.php?id="+id+"_picture' style='width:260px;height:25px;'></iframe>";
			   d += "</div>";
			   d += "  <div>网络地址：<input type='text' name='"+id+"_picture' id='"+id+"_picture' value='http://' class='editor_picture'></div>";
			   d += "<div unselectable='on' style='margin-top:5px;padding-left:60px;'>";
			   d += "<input id='"+id+"_link_"+t+"' para='InsertImage' type='button' value='立即插入' style='margin-left:2px;width:70px;'>";
			   d += "<input type='button' value='取消' style='margin-left:2px;' onclick='CD.func.fHide(\""+id+"\");'>";
			   d += "</div>";
			   d += "</div>";
			break;
			case "createlink":
			   d += "<div unselectable='on' style='width:200px;margin:8px 10px;'>";
			   d += "<div unselectable='on'>请输入链接的目标地址：</div>";
			   d += "<div unselectable='on'><input id='"+id+"_url' type='text' class='editor_txt' value='http://' /></div>";
			   d += "<div unselectable='on' style='margin-top:5px;padding-left:50px;'>";
			   d += "<input id='"+id+"_link_"+t+"' para='createlink' type='button' value='确定' style='margin-left:2px;'>";
			   d += "<input type='button' value='取消' style='margin-left:2px;' onclick='CD.func.fHide(\""+id+"\");'>";
			   d += "</div>";
			   d += "</div>";
			break;
			default:
			    if(t!="forecolor" && t!="backcolor") break;
				d += "<div style='width:160px;'>";
				for(var i=0;i<CD.lang["color"].length;i++){
					d += "<div class='editor_menu' style='font-size:1px;float:left;width:14px;height:14px;' title='#"+CD.lang["color"][i]+"' unselectable='on' ";
					d += " onmouseover='CD.func.Mcolor(this)' onmouseout='CD.func.Mcolor(this,1)' >";
					d += "  <div style='border:1px solid #a6a6a6;width:12px;height:12px;background:#"+CD.lang["color"][i]+"' unselectable='on' ";
					d += " id='"+id+"_"+i+"_"+t+"' para='#"+CD.lang["color"][i]+"'>&nbsp;</div>";
					d += "</div>";
				}
				d += "</div>";
			break;
		}
		d += "</div>";
		return d;
	},
	CodeEditor : function(id,r){
		var o = CD.g[id];
		if(o.codeMode){
			for(var i = 0; i < CD.lang["items"].length; i++){
			    var p = CD.lang["items"][i][0];
				if((r==true && p=="picture") ||  p!="picture") CD.$(id+"_"+i+"_"+p).style.display = 'none';	
			}
			CD.$(id+"_editor_source").innerHTML = "预览<b>&#187;</b>";
			CD.$(id+"_editor_source").title     = "预览效果";
			if(o.filterMode){
				o.newTextarea.value = CD.func.HtmlToText(o.iframeDoc.body.innerHTML);
			}else{
				o.newTextarea.value = o.iframeDoc.body.innerHTML;
			}
			o.iframe.style.display = 'none';
			o.newTextarea.style.display = 'block';
			o.codeMode = false;
		}else{
			for(var i = 0; i < CD.lang["items"].length; i++){
			    var p = CD.lang["items"][i][0];
				if((r==true && p=="picture") ||  p!="picture") CD.$(id+"_"+i+"_"+p).style.display = 'block';	
			}
			CD.$(id+"_editor_source").innerHTML = "&lt;HTML&gt;";
			CD.$(id+"_editor_source").title     = "编辑HTML源码";
	
			o.iframeDoc.body.innerHTML = o.newTextarea.value;
			o.iframe.style.display = 'block';
			o.newTextarea.style.display = 'none';
			o.codeMode = true;
		}
	},
    getData : function(id,filterMode) {
        var data;
        if (CD.g[id].codeMode) {
            if(filterMode) {
                data = CD.func.HtmlToText(CD.g[id].iframeDoc.body.innerHTML);
            }else{
                data = CD.g[id].iframeDoc.body.innerHTML;
            }
        } else {
            data = CD.g[id].newTextarea.value;
        }
        return data;
    },
    setData : function(id) {
		var data = CD.func.getData(id,CD.g[id].filterMode);
		CD.g[id].srcTextarea.value = data;
    },
	Reset : function(id){
	    CD.g[id].iframeDoc.body.innerHTML = "";
		CD.g[id].newTextarea.value = "";
		CD.g[id].srcTextarea.value = "";
	},
    loadStyle : function(path) {
        var link = CD.$$('link');
        link.setAttribute('type', 'text/css');
        link.setAttribute('rel', 'stylesheet');
        link.setAttribute('href', path);
        document.getElementsByTagName("head")[0].appendChild(link);
    },
    resize : function(id, width, height) {
		var obj = CD.g[id];
        if (width <= obj.minWidth || height <= obj.minHeight) return;
        obj.container.style.width = width + 'px';
        obj.container.style.height = height + 'px';
        obj.formDiv.style.height = height + 'px';
		var diff = obj.toolbarDiv.offsetHeight;
        var formBorder = obj.formDiv.offsetHeight - obj.formDiv.clientHeight;
        height -= diff + formBorder;
        if (CD.browser) {
            var border = obj.container.offsetWidth - obj.container.clientWidth;
            if (document.compatMode != "CSS1Compat") {
                height -= border;
                width -= border;
                obj.formDiv.style.height = (height + formBorder) + 'px';
            } else {
                obj.formDiv.style.height = height + 'px';
            }
            obj.iframe.style.height = height + 'px';
            obj.newTextarea.style.width = (width - border) + 'px';
            obj.newTextarea.style.height = (height - formBorder) + 'px';
        } else {
            obj.formDiv.style.height = height + 'px';
            obj.iframe.style.height = height + 'px';
            obj.newTextarea.style.width = '100%';
            obj.newTextarea.style.height = height + 'px';
        }
    },
	HtmlToText : function(w){
		var res = w.replace( /\n/ig, "" );
		res = res.replace( /(<\/div>)|(<\/p>)|(<br\/?>)/ig, "\n" );
		return res;
	}
}
CD.browser = CD.func.getBrowser();
CD.toolbar = {
    create : function(id) {
		var toolbar = CD.$$('div');	
		var tool = "<div id='"+id+"_toolbar' unselectable='on' class='editor_toolbar'>";
		for (var i = 0; i < CD.lang["items"].length; i++) {
			if(CD.lang["items"][i][0] == "picture" && CD.g[id].use != true) continue;
			var p = CD.func.toolprompt(id,i,CD.lang["items"][i][0]);
			tool += "<div id="+id+"_"+i+"_"+CD.lang["items"][i][0]+" style='";
			tool += "background:url("+CD.g[id].root+"images/editoricon.gif) -"+CD.lang["items"][i][1]+"px 0;width:"+CD.lang["items"][i][2]+"px;";
			tool += "' class='editor_btn' unselectable='on' title="+CD.lang["items"][i][5]; 
			tool += " onmousedown=CD.func.BMouse(this,1) onmouseover=CD.func.BMouse(this,0) onmouseout=CD.func.BMouse(this,2) onmouseup=CD.func.BMouse(this,0)";
			tool += ">"+p+"</div>";
		}
		tool += "<div id='"+id+"_editor_source' class=editor_abtn onclick='CD.func.CodeEditor(\""+id+"\","+CD.g[id].use+");' ";
		tool += " unselectable='on' title='编辑HTML源码'>&lt;HTML&gt;</div>";
		tool += "</div>";
		toolbar.innerHTML = tool;
		
		CD.event.add(toolbar, 'click',CD.func.ClickHandle);//监听toolbar
		return toolbar;
    }
};