editor_toolbar.js

简单的记事本

//Global def
var gTBPart = ["base", "style", "format", "more", "html"];
var gTBCmds = ["bold", "italic", "underline", "fontname", "fontsize", "forecolor", (gIsFF)?"hilitecolor":"backcolor", "alignmode", "serial", "indent", "createlink","picture"];
var gTBCmdsIdx = fIndexCreater(gTBCmds);

//Gen tool bar
function fGenToolBarHtml() {
	var commHeadMenu = [ '<div style="background:url(', gEditorPath, 'images/editoricon.gif)  -$left$px 0;width:$w$px;margin:$m$;height:17px;float:left;" unselectable="on"' ].join( "" );
	var commTail = '></div>';

	var partDisp = [];
	for (var i = 0, len = gTBPart.length; i < len; i++)
	{
		partDisp.push(gEditorToolBarSet[gTBPart[i]] == false ? "display:none;" : ";");
	}
	var dat= [
		//id,bg-left,width,margin,style,title
		 ["tb_"+gTBCmds[0],"0","19","0",partDisp[0],"加粗"]
		,["tb_"+gTBCmds[1],"20","20","0",partDisp[0],"斜体"]
		,["tb_"+gTBCmds[2],"40","20","0",partDisp[0],"下划线"]
		,["-","320","3","-1px 3px 0 4px",partDisp[0],"间隔线"]
		,["tb_"+gTBCmds[3],"60","20","0 2px",partDisp[1],"选择字体"]
		,["tb_"+gTBCmds[4],"80","21","0 2px",partDisp[1],"字体大小"]
		,["tb_"+gTBCmds[5],"240","20","0 2px",partDisp[1],"字体颜色"]
		,["tb_"+gTBCmds[6],"260","20","0 2px",partDisp[1],"背景颜色"]
		,["-","320","3","-1px 4px 0 2px",partDisp[1],"间隔线"]
		,["tb_"+gTBCmds[7],"427","21","0 4px 0 0",partDisp[2],"对齐方式"]
		,["tb_"+gTBCmds[8],"449","22","0 4px 0 0",partDisp[2],"编号"]
		,["tb_"+gTBCmds[9],"470","22","0 4px 0 0",partDisp[2],"缩进"]
		,["-","320","3","-1px 3px 0 1px",partDisp[2],"间隔线"]
		,["tb_"+gTBCmds[10],"280","22","0",partDisp[3],"增加链接"]
		,["tb_"+gTBCmds[11],"322","22","0",partDisp[4],"插入图片"]
	];
	var templ = ( [ '<div id="$id$" style="background:url(', gEditorPath, 'images/editoricon.gif) -$left$px 0;width:$w$px;margin:$m$;$s$" class="editor_btn" unselectable="on"  title="$title$" onmousedown=fOnTBMouseDown(this) onmouseover=fOnTBMouseOver(this) onmouseout=fOnTBMouseOut(this) onmouseup=fOnTBMouseOver(this)></div>' ].join( "" ) ).split("$");
	var code = [ 
	"<div id='", gEditorToolBarId, "' class='editor_toolbar' unselectable='on'>", 
		"<div id='editor_toolbar_comm' style='float:left;margin:0 4px;''>", 
			fGenHtml(dat, templ), 
			"<div id='editor_toolbarplus' style='float:left;'></div>", 
		"</div>", 
		"<div class='editor_abtn' id='editor_htmlbtn' onclick='fChangeEditor(1);' unselectable='on'  style='", partDisp[4], "' title='编辑HTML源码'>&lt;HTML&gt;</div>",
		"<div class='editor_abtn' id='editor_sourcebtn' style='display:none;' onclick='fChangeEditor();' unselectable='on' title='预览效果'>预览<b>&#187;</b></div>", 
	"</div>" ];

	//menu board
	var menuH = '<div class="editor_menu" unselectable="on" onmouseover=fOnMenuMouseOver(this) onmouseout=fOnMenuMouseOut(this) para="$v$" ';
	var menuT = '</div>';
	var colorDat = [
		[0, 0]
		,['000000'],['993300'],['333300'],['003300'],['003366'],['000080'],['333399'],['333333']
		,['800000'],['FF6600'],['808000'],['008000'],['008080'],['0000FF'],['666699'],['808080']
		,['FF0000'],['FF9900'],['99CC00'],['339966'],['33CCCC'],['3366FF'],['800080'],['999999']
		,['FF00FF'],['FFCC00'],['FFFF00'],['00FF00'],['00FFFF'],['00CCFF'],['993366'],['C0C0C0']
		,['FF99CC'],['FFCC99'],['FFFF99'],['CCFFCC'],['CCFFFF'],['99CCFF'],['CC99FF'],['FFFFFF']
	];
	var colorDat2 = colorDat.slice(0);
	for (var i = colorDat2.length - 1; i > 0; i--) colorDat2[i].push('&nbsp;', gIsIE ? 14 : 12, gIsIE ? 12 : 10);
	colorDat2[0] = [0, 2, 3, 0, 1];
	var dat = [
		 [[0, "cc0000","00b085","00b085","663399","00ade5","663399","0066cc","00ade5"]]
		,[[2, "eb4200","a90005","a90005","d13800","bc4b00","eb4200","a90005","bc4b00"]]
		,[[3, "00d1aa","00a9eb","00bc78","00a957","00cfb7","00ebc3","00bcb2","#00ebc3"]]
		,[[1, "0071bc","00a9eb","295caa","00a9eb","0089cf","0089cf","00a9eb","0099d1"]]
	];
	var tf = "<font unselectable=on color=#$c$>";
	for (var i = 0; i < 4; i++) colorDat2.push(['_RFC'+dat[i][0][0], fGenHtml(dat[i], ( [ '<center style="font-size:12px;margin-top:-1;" para=_RFC$i$>', tf, 'A</font>', tf, 'B</font>', tf, 'C</font>', tf, 'D</font>', tf, 'a</font>', tf, 'b</font>', tf, 'c</font>', tf, 'd</font></center>' ].join( "" ) ).split("$")), 138, 136]);
	dat = [
		//id,pLeft,pTop,width,menu dat,templ
		[
			"mutb_"+gTBCmds[3],"0",gIsIE ? "3" : "0","116"
			,[
				 [0, 0, 1]
				,["宋体","宋体"]
				,["黑体","黑体"]
				,["楷体_GB2312","楷书"]
				,["幼圆","幼圆"]
				,["Arial","Arial"]
				,["Arial Black","Arial Black"]
				,["Times New Roman","Times New Roman"]
				,["Verdana","Verdana"]
			]
			,[menuH, ' style="font:normal 12px $f$">$c$', menuT].join( "" )
		 ]
		,[
			"mutb_"+gTBCmds[4],"0",gIsIE ? "3" : "0","116"
			,[
				 [0, 1, 2]
				,[1,"xx-small;","小"]
				,[2,"x-small;","中"]
				,[4,"medium;","大"]
				,[5,"large;line-height:28px;height:26px;","较大"]
				,[6,"x-large;line-height:36px;height:34px;","最大"]
			]
			,[menuH, ' style="font-size:$s$">$c$', menuT].join( "" )
		 ]
		,[
			"mutb_"+gTBCmds[5],"0",gIsIE ? "3" : "0","150"
			,colorDat2
			,[menuH, ' style="font-size:1px;width:$w$px;height:12px!important;height:14px;height:/**/14px;float:left;"><div unselectable="on" style="width:$w$px;height:10px!important;height:12px;height:/**/12px;background:#$c$;border:1px solid #a6a6a6;">$c$</div>', menuT].join( "" )
		 ]
		,[
			"mutb_"+gTBCmds[6],"0",gIsIE ? "3" : "0","150"
			,colorDat
			,[menuH, ' style="font-size:1px;width:12px!important;width:14px;width:/**/14px;height:12px!important;height:14px;height:/**/14px;float:left;"><div unselectable="on" style="width:10px!important;width:12px;width:/**/12px;height:10px!important;height:12px;height:/**/12px;background:#$c$;border:1px solid #a6a6a6;">&nbsp;</div>', menuT].join( "" )
		 ]
		,[
			"mutb_"+gTBCmds[7],"0",gIsIE ? "3" : "0","100"
			,[
				 [0, 1, 2, 3, 4, 5]
				,["justifyleft","100","20","-3px 0 0 0","&nbsp;左对齐","&nbsp;左对齐"]
				,["justifycenter","120","20","-3px 0 0 0","&nbsp;居中对齐","&nbsp;居中对齐"]
				,["Justifyright","140","20","-3px 0 0 0","&nbsp;右对齐","&nbsp;右对齐"]
			]
			,[menuH, '>', commHeadMenu, commTail, '$c$', menuT].join( "" )
		 ]
		,[
			"mutb_"+gTBCmds[8],"0",gIsIE ? "3" : "0","100"
			,[
				 [0, 1, 2, 3, 4, 5]
				,["insertorderedlist","160","20","-3px 0 0 0","&nbsp;数字编号","&nbsp;数字编号"]
				,["insertunorderedlist","180","20","-3px 0 0 0","&nbsp;项目编号","&nbsp;项目编号"]
			]
			,[menuH, '>', commHeadMenu, commTail, '$c$', menuT].join( "" )
		 ]
		,[
			"mutb_"+gTBCmds[9],"0",gIsIE ? "3" : "0","100"
			,[
				 [0, 1, 2, 3, 4, 5]
				,["indent","220","20","-3px 0 0 0","&nbsp;向右缩进","&nbsp;向右缩进"]
				,["outdent","200","20","-3px 0 0 0","&nbsp;向左缩进","&nbsp;向左缩进"]
			]
			,[menuH, '>', commHeadMenu, commTail, '$c$', menuT].join( "" )
		 ]
		,[
			"mutb_"+gTBCmds[10],"0",gIsIE ? "3" : "0","220"
			,[
				 [0, 1, 2]
				,["mutb_"+gTBCmds[10]+"_alert","padding:14px 0 10px 0;", "请先选择要加入链接的文字<div  unselectable='on' style='margin:10px 0 0 0'><input type=button class='wd2 btn' value=重新选择></div>"]
				,["mutb_"+gTBCmds[10]+"_prompt","padding:14px 0 10px 0;", "<div unselectable='on' style='margin:0 0 2px 5px;text-align:left;'>请输入链接的目标地址：</div><div unselectable='on'><input id='mutb_"+gTBCmds[10]+"_url' type=text style='width:200px;' class='txt' value='http://' /></div><div style='margin:2px 0 0 5px;font-size:11px;text-align:left;' class='addrtitle'>(例如: http://www.1715.cn/)</div><div unselectable='on' style='margin-top:5px;'><input id='mutb_"+gTBCmds[10]+"_ok' class='wd1 btn' type=button value=' 确定 '><input class='wd1 btn' type=button value=' 取消 '></div>"]
			 ]
			,"<div id='$id$' style='display:none;font:12px normal Verdana;width:100%;text-align:center;$s$' unselectable='on'>$c$</div>"
		 ]
		,[
			"mutb_"+gTBCmds[11],"0",gIsIE ? "3" : "0","350"
			,[
				 [0, 1, 2]
				,["mutb_"+gTBCmds[11]+"_alert","padding:5px 0 0 0;", "<div unselectable='on' style='margin:0 0 2px 5px;text-align:left;'>图片来源：</div>"]
				,["mutb_"+gTBCmds[11]+"_pic","padding:3px 0 0 0;", "<table unselectable='on' width='100%' border='0' cellspacing='0' cellpadding='0'><tr><td height='23' align='right'>网络：</td><td><input type='text' name='picture' id='picture' style='width:220px;' value='http://'></td></tr></table><div unselectable='on' style='margin-top:5px;'><input id='mutb_"+gTBCmds[11]+"_ok' class='wd1 btn' type=button value=' 确定 '><input class='wd1 btn' type=button value=' 取消 '></div>"]
			 ]
			,"<div id='$id$' style='display:none;font:12px normal Verdana;width:100%;text-align:center;$s$' unselectable='on'>$c$</div>"
		 ]
	];
	for (var i = dat.length - 1; i >= 0; i--) {
		code.push( [ '<div id="', dat[i][0], '" class="editor_board" offsetLPos="', dat[i][1], '" offsetTPos="', dat[i][2], '" style="width:', dat[i][3],  'px;display:none;margin-top:0;" unselectable="on">', fGenHtml(dat[i][4],  (dat[i][5]).split("$"), 1), '</div>' ].join( "" ) );
	}

	fSetTBEvent();

	return code.join( "" );
}
//event
function fSetTBEvent() {
	fAddEvent(document, "click", fTBOnClickHandle);
	fAddEvent(document, "keypress", fTBOnKeyPressHandle);
}
function fContinuousTagPos(content, opt) {
	var l = content.length;
	var tag1 = opt ? ">" : "<";
	var tag2 = opt ? "<" : ">";
	var step = opt ? -1 : 1;
	var condition = opt ? 1 : l;
	var status = 0;
	for (var i = opt ? l - 1 : 0; step*i < condition; i += step) {
		var c = content.charAt(i);
		if (c == "\n" || c == "\r") continue;
		if (c == tag1) {
			status = 1;
		}
		else if (status != 1) {
			break;
		}
		else if (c == tag2) {
			status = 0;
		}
	}
	return i;
}
function fTBOnClickHandle(e) {
	var o = e.srcElement || e.target;
	var tmp = gTBCmdsIdx[o.id.replace(/^tb_/, "")];
	//toolbar btn process
	if (tmp >= 0 && tmp <= 2) {
		fHideTBMenu();
		return fTBExecCmd(gTBCmds[tmp]);
	}
	if (tmp >= 2 && tmp <= 10) {
		if (tmp == 10) {
			fSavePos();
			var f = F(gHtmlId);
			try{
				var b = (f.getSelection != null ? !f.getSelection().getRangeAt(0).collapsed : f.document.selection.createRange().htmlText.length > 0);
			}catch(e){
				var b = true;
			}
			fDisp("mu" + o.id + "_alert", !b);
			fDisp("mu" + o.id + "_prompt", b);
		}
		return fIsDisp("mu"+o.id) ? fHideTBMenu() : fDispTBBoard("mu"+o.id);
	}
	if ( tmp == 11) {
	    fDisp("mu" + o.id + "_alert" , b);
		fDisp("mu" + o.id + "_pic", b);
		return fIsDisp("mu"+o.id) ? fHideTBMenu() : fDispTBBoard("mu"+o.id);	
	}
	//menu process
	for (var i = gTBCmds.length - 1; i >= 0; i--) {
		if (fIsInObj(o, "mutb_"+gTBCmds[i])) {
			tmp = o.getAttribute("para") ? o.getAttribute("para") : o.parentNode.getAttribute("para");
			if (tmp) {
				fHideTBMenu();
				if (tmp.indexOf("_RFC") == 0) return fRandomFontColor(parseInt(tmp.substr(4)));
				(i >=7 && i <= 9) ? fTBExecCmd(tmp) : fTBExecCmd(gTBCmds[i], tmp);
			}
			else if (i == 10) {
				if (o.type == "button") {
					fHideTBMenu();			
					fLoadPos();
				}
				//create link
				if (o.id == "mutb_"+gTBCmds[10]+"_ok") {
					fCreateLink();
				}
			}else if (i == 11) {
			    if (o.type == "button" && o.id == "mutb_"+gTBCmds[11]+"_ok") {
				   var UpPic = window.document.getElementById('picture').value;
				   if(UpPic != "" && UpPic != null){
					    UpPic = UpPic.replace(/\\/g,"/"); 
						try{
							fTBPInsertPic(URLFieldEncode(UpPic));
						}catch(e){alert(e.description);}
				   }
				}//end button
				fHideTBMenu();
				fLoadPos();
			}
			return;
		}
	}
	//hide toolbar menu
	fHideTBMenu();
}
function fTBOnKeyPressHandle(e) {
	var o = e.srcElement || e.target;
	if (o.id == "mutb_"+gTBCmds[10]+"_url" && (e.keyCode == 13 || e.keyCode == 10)) {
		fLoadPos();
		fCreateLink();
		fHideTBMenu();
		fPreventDefault(e);
	}
}
function fSetBorderMouse(obj, flag)
{
	if (obj.title == "间隔线") return;
	obj.className = (flag == 0 ? "editor_btn_mover" : flag == 1 ? "editor_btn_mdown" : "editor_btn");
}
function fOnTBMouseOver(obj) {
	fSetBorderMouse(obj,0);
} 
function fOnTBMouseDown(obj) {
	fSetBorderMouse(obj,1);
}
function fOnTBMouseOut(obj) {
	fSetBorderMouse(obj,2);
}
//0:htmleditor 1:sourceediotr 2:<->
function fChangeEditor(flag) {
	var d = S("editor_source_span");
	var h = S(gHtmlId);
	var c = (gEditorCurId == gHtmlId);
	if ((c && !flag) || (!c && flag == 1) || gEditorCurId == gTextId) return ;

	if (!d) {
		var d = document.createElement("div");
		d.id = "editor_source_span";
		d.innerHTML = ["<textarea  class=editor_source id='", gSourceId, "' style='height:", (parseInt(h.style.height) + 2), "px;font-family:宋体;'></textarea>"].join("");
		fDisp(d, 0);
		h.nextSibling ? h.parentNode.insertBefore(d, h.nextSibling) : h.parentNode.appendChild(d);
	}

	var s = S(gSourceId);
	gEditorCurId = c ? gSourceId : gHtmlId;
	PutContent(	c ? fGetContent() : GetTextareaValue( s ) );

	fDisp(h, 2);
	fDisp(d, 2);
	fDisp(S("editor_toolbar_comm"), 2);
	fDisp(S("editor_sourcebtn"), 2);
	fDisp(S("editor_htmlbtn"), 2);
	fDisp(S("editor_format"), 2);
	fDisp(S("editor_formatting"), 0);
	fSetEditorFocus();
}

//toolbar menu fun
function fDispTBBoard(obj, nLeft) {
	//resize the pos
	if(obj== "mupicture") return false;
	obj = (typeof(obj) == "string" ? S(obj) : obj);
	var o = S(obj.id.replace(/^mu/, ""));
	var ol = 0, ot = 0, oh = o.offsetHeight;
	for (; o;o = o.offsetParent) {
		ol += o.offsetLeft;
		ot += o.offsetTop;
	}
	obj.style.left = ol + parseInt(obj.getAttribute("offsetLPos"));
	obj.style.top = ot + oh + parseInt(obj.getAttribute("offsetTPos"));

	fHideTBMenu();
	fDisp(obj, 1);
}