myedit.js

全用Javascript编写的在线编辑器.

// JavaScript Document
var bq;
var et;
var tab;
var color_type;


function init(id)
{
	create_all(id);	
    
}

function create_all(id)
{
	var div=create_div();
	
	var bq_div_all=document.createElement("div");
	bq_div_all.setAttribute("id","bq_div_all");
	bq_div_all.className="bg_color_div_all";
	
	
	var color_div_all=document.createElement("div");
	color_div_all.setAttribute("id","color_div_all");
	color_div_all.className="bg_color_div_all";
	
	var bg_color_div_all=document.createElement("div");
	bg_color_div_all.setAttribute("id","bg_color_div_all");
	bg_color_div_all.className="bg_color_div_all";
	
	var div_img=document.createElement("div");
	div_img.setAttribute("id","div_img");
	div_img.className="div_img_all";
	
	div.setAttribute("id","div_all");
	
	var toolbar=create_toolbar();
	window.tab=bq_div_all;
	
	var edit=create_edit(id);	
	window.et=edit;
	
//var color=create_color();

	var table=document.createElement("table");	
	table.className="table";
	table.setAttribute("border","1");
	table.setAttribute("cellspacing","0");
	table.setAttribute("cellpadding","0");
	table.setAttribute("width","100%");
	table.setAttribute("heigth","100%");
	var row=new Array();
	
	for(var i=0;i<2;i++)
	{
		row[i]=table.insertRow(i);
		
		row[i].insertCell(0);
		
	}
	table.rows[0].cells[0].setAttribute("valign","top");
	table.rows[1].cells[0].setAttribute("valign","top");
	table.rows[1].cells[0].setAttribute("id","table_top");
	
	table.rows[0].cells[0].appendChild(toolbar);
	table.rows[1].cells[0].appendChild(edit);
	
//	div.appendChild(color);
    div.appendChild(bg_color_div_all);	
	div.appendChild(color_div_all);	
	div.appendChild(bq_div_all);
	div.appendChild(div_img);
	div.appendChild(table);		
	id.appendChild(div);	
	return div;
	
}

function create_div()
{
	var div=document.createElement("div");	
	//div.className="div";
	
	
	return div;	
}

function add_proc(id)
{
	id.attachEvent("onmouseover",function(){id.className="t1"});	
	id.attachEvent("onmouseout",function(){id.className="t2"});
}

function on_click(id)
{
	var edit=document.getElementById("et");
	
	edit.focus();
	
	switch(id)
	{
	 	case "img1[1]":		
			document.execCommand('bold');			
			break;
		case "img2[1]":
		    var div=document.getElementById("color_div_all");
			if(div.innerHTML=="")
			{
				var color=create_color("forecolor");
			   	div.appendChild(color);	  
				div.style.marginLeft=document.getElementById("tool1").offsetLeft+3;
				div.style.marginTop=document.getElementById("table_top").offsetTop-9;
			}
			else
			{
				div.style.marginLeft=document.getElementById("tool1").offsetLeft+3;
				div.style.marginTop=document.getElementById("table_top").offsetTop-9;
				div.style.display="block";					
			}
		    	
			break;
		case "img1[2]":
			document.execCommand('italic');
			break;
		case "img2[2]":
		    var div=document.getElementById("bg_color_div_all");
			if(div.innerHTML=="")
			{
				var color=create_bgcolor();
			   	div.appendChild(color);	 
				div.style.marginLeft=document.getElementById("tool2").offsetLeft+3;
				div.style.marginTop=document.getElementById("table_top").offsetTop-9;
			}
			else
			{				
				div.style.marginLeft=document.getElementById("tool2").offsetLeft+3;
				div.style.marginTop=document.getElementById("table_top").offsetTop-9;
				div.style.display="block";				
			}
		    	
			break;
		case "img1[3]":
			document.execCommand('underline');
			break;
		case "img2[3]":
			document.execCommand('delete');
			break;
		case "img1[5]":
			document.execCommand('justifyleft');
			break;
	    case "img2[5]":
			document.execCommand('superscript');
			break;
		case "img1[6]":
			document.execCommand('justifycenter');
			break;
		case "img2[6]":
			document.execCommand('subscript');
			break;
		case "img1[7]":
			document.execCommand('justifyright');
			break;
		case "img2[7]":
			document.execCommand('insertorderedlist');
			break;
		case "img1[8]":
			document.execCommand('justifyfull');
			break;
		case "img2[8]":
			document.execCommand('insertunorderedlist');
			break;
		case "img2[10]":
			document.execCommand('undo');
			break;
		case "img2[11]":
			document.execCommand('redo');
			break;
		case "img2[15]":
			var div=document.getElementById("div_img");
			
			if(div.innerHTML=="")
			{
		        var bq=create_insertImge();
			    div.appendChild(bq);
				
                div.style.marginLeft=document.getElementById("tool15").offsetLeft+33;
				div.style.marginTop=document.getElementById("table_top").offsetTop-10;
			}
			else
			{  
			    //var id=document.getElementById("insert_img")
				div.style.marginLeft=document.getElementById("tool15").offsetLeft+33;
				div.style.marginTop=document.getElementById("table_top").offsetTop-10;
				div.style.display="block";
				//id.style.display="block";
			}
			break;
		case "select1":
		    var i=document.getElementById(id);			
			document.execCommand('FontSize',false,i.options[i.selectedIndex].value)			
			break;
		case "select2":
		    var i=document.getElementById(id);
			document.execCommand('FontName',false,i.options[i.selectedIndex].text)				
			break;
		case "img2[12]":
			document.execCommand('CreateLink',true,edit);
			break;
		case "img2[14]":
		    
			break;
		case "img2[13]":
		    var div=document.getElementById("bq_div_all");
			//alert(document.getElementById("tool3").offsetLeft);
			if(tab.innerHTML=="")
			{
		   		var bq=create_bq(et);
				div.appendChild(bq);
                div.style.marginLeft=document.getElementById("tool3").offsetLeft-291;
				div.style.marginTop=document.getElementById("table_top").offsetTop-78;
			}
			else
			{
				div.style.marginLeft=document.getElementById("tool3").offsetLeft-291;
				div.style.marginTop=document.getElementById("table_top").offsetTop-78;
				div.style.display="block";				
			}
			
			break;
	}
}

function set_attribute(obj,id,str_id,styl,torf)
{
	id.className="t2";
	obj.appendChild(id);
	obj.className=styl;		
	if(torf)
	{
		id.attachEvent("onclick",function(){on_click(str_id);});
		add_proc(id);
	}	
}

function create_toolbar()
{ 
	var toolbar=document.createElement("table");
	toolbar.className="tool_table";
//	toolbar.setAttribute("border","1");
	toolbar.setAttribute("cellspacing","0");
	toolbar.setAttribute("cellpadding","0");
	toolbar.setAttribute("width","100%");
	toolbar.setAttribute("heigth","100%");

   // toolbar.setAttribute("borderColor","black");
  
	
	var first=toolbar.insertRow(0);
	var two=toolbar.insertRow(1);	
	for(var i=0;i<14;i++)
	{
	  	var td=first.insertCell(i);
		var td2=two.insertCell(i);
		
	}
	var img1=new Array();
	var img2=new Array();
    img1[0]=document.createElement("image");
	img2[0]=document.createElement("image");
	img1[0].setAttribute("src","image/Start.gif");
	img2[0].setAttribute("src","image/Start.gif");
	set_attribute(toolbar.rows[0].cells[0],img1[0],"img1[0]","first",false);
	set_attribute(toolbar.rows[1].cells[0],img2[0],"img2[0]","first",false);	
	
	img1[1]=document.createElement("image");
	img1[1].setAttribute("src","image/bold.gif");
	img2[1]=document.createElement("image");
	img2[1].setAttribute("src","image/backcolor.gif");	
	img2[1].setAttribute("id","img2[1]");
	toolbar.rows[1].cells[1].setAttribute("id","tool1");
	set_attribute(toolbar.rows[0].cells[1],img1[1],"img1[1]","two",true);	
	set_attribute(toolbar.rows[1].cells[1],img2[1],"img2[1]","two",true);
	
	img1[2]=document.createElement("image");
	img1[2].setAttribute("src","image/italic.gif");
	img2[2]=document.createElement("image");
	img2[2].setAttribute("src","image/bgcolor.gif");
	img2[2].setAttribute("id","img2[2]");
	toolbar.rows[1].cells[2].setAttribute("id","tool2");
	set_attribute(toolbar.rows[0].cells[2],img1[2],"img1[2]","two",true);	
	set_attribute(toolbar.rows[1].cells[2],img2[2],"img2[2]","two",true);	
	
	img1[3]=document.createElement("image");
	img1[3].setAttribute("src","image/underline.gif");
	img2[3]=document.createElement("image");
	img2[3].setAttribute("src","image/delete.gif");
	set_attribute(toolbar.rows[0].cells[3],img1[3],"img1[3]","two",true);	
	set_attribute(toolbar.rows[1].cells[3],img2[3],"img2[3]","two",true);	
	
	img1[4]=document.createElement("image");
	img2[4]=document.createElement("image");
	img1[4].setAttribute("src","image/Seperator.gif");
	img2[4].setAttribute("src","image/Seperator.gif");
	set_attribute(toolbar.rows[0].cells[4],img1[4],"img1[4]","first",false);
	set_attribute(toolbar.rows[1].cells[4],img2[4],"img2[4]","first",false);
	
	img1[5]=document.createElement("image");
	img1[5].setAttribute("src","image/justifyleft.gif");
	img2[5]=document.createElement("image");
	img2[5].setAttribute("src","image/superscript.gif");
	set_attribute(toolbar.rows[0].cells[5],img1[5],"img1[5]","two",true);	
	set_attribute(toolbar.rows[1].cells[5],img2[5],"img2[5]","two",true);	
	
	img1[6]=document.createElement("image");
	img1[6].setAttribute("src","image/justifycenter.gif");
	img2[6]=document.createElement("image");
	img2[6].setAttribute("src","image/subscript.gif");
	set_attribute(toolbar.rows[0].cells[6],img1[6],"img1[6]","two",true);	
	set_attribute(toolbar.rows[1].cells[6],img2[6],"img2[6]","two",true);	
	
	img1[7]=document.createElement("image");
	img1[7].setAttribute("src","image/justifyright.gif");
	img2[7]=document.createElement("image");
	img2[7].setAttribute("src","image/insertorderedlist.gif");
	set_attribute(toolbar.rows[0].cells[7],img1[7],"img1[7]","two",true);	
	set_attribute(toolbar.rows[1].cells[7],img2[7],"img2[7]","two",true);	
	
	img1[8]=document.createElement("image");
	img1[8].setAttribute("src","image/justifyfull.gif");
	img2[8]=document.createElement("image");
	img2[8].setAttribute("src","image/insertunorderedlist.gif");
	set_attribute(toolbar.rows[0].cells[8],img1[8],"img1[8]","two",true);	
	set_attribute(toolbar.rows[1].cells[8],img2[8],"img2[8]","two",true);	
	
	img1[9]=document.createElement("image");
	img2[9]=document.createElement("image");
	img1[9].setAttribute("src","image/Seperator.gif");
	img2[9].setAttribute("src","image/Seperator.gif");
	set_attribute(toolbar.rows[0].cells[9],img1[9],"img1[9]","first",false);
	set_attribute(toolbar.rows[1].cells[9],img2[9],"img2[9]","first",false);
	
	select1=document.createElement("select");
	select1.attachEvent("onchange",function(){on_click("select1");});
	select1.className="select1";
	set_selectoptions(select1,"select1");
	
	toolbar.rows[0].cells[10].appendChild(select1);
	toolbar.rows[0].cells[10].setAttribute("width","100px");
	
	toolbar.rows[0].cells[10].setAttribute("colspan","3");
	img1[10]=document.createElement("image");
	img1[10].setAttribute("src","image/Seperator.gif");
	set_attribute(toolbar.rows[0].cells[11],img1[10],"img1[10]","first",false);
	

	select2=document.createElement("select");	
	select2.className="select2";	
	set_selectoptions(select2,"select2");
	select2.attachEvent("onchange",function(){on_click("select2");});
	toolbar.rows[0].cells[12].appendChild(select2);

    img1[11]=document.createElement("image");
	img1[11].setAttribute("src","image/Start.gif");
	set_attribute(toolbar.rows[0].cells[13],img1[11],"img1[11]","first",false);
    f_name(toolbar.rows[0].cells[13]);
	
	var a=new Array();
	var tb2=document.createElement("table");
	var row=tb2.insertRow(0);
	for(var i=0;i<3;i++)
	{
	 	a[i]=row.insertCell(i);
		a[i].setAttribute("width","25px");
	}
	toolbar.rows[1].cells[10].appendChild(tb2);
	toolbar.rows[1].cells[10].setAttribute("id","tool3");
	
	img2[10]=document.createElement("image");
	img2[10].setAttribute("src","image/undo.gif");
	set_attribute(a[0],img2[10],"img2[10]","two",true);
	
	img2[11]=document.createElement("image");
	img2[11].setAttribute("src","image/redo.gif");

	set_attribute(a[1],img2[11],"img2[11]","two",true);	
	img2[13]=document.createElement("image");
	img2[13].setAttribute("id","img2[13]");
	img2[13].setAttribute("src","image/QQ/e102.gif");
	set_attribute(a[2],img2[13],"img2[13]","two",true);
	
	img2[12]=document.createElement("image");
	img2[12].setAttribute("src","image/createlink.gif");
	set_attribute(toolbar.rows[1].cells[11],img2[12],"img2[12]","two",true);
	img2[14]=document.createElement("image");
	img2[14].setAttribute("src","image/unlink.gif");
	set_attribute(toolbar.rows[1].cells[12],img2[14],"img2[14]","two",true);	
	img2[15]=document.createElement("image");
	img2[15].setAttribute("src","image/img.gif ");
	img2[15].style.width="20px"
	img2[15].style.height="20px";
	img2[15].style.marginLeft="8px";
	img2[15].setAttribute("id","img2[15]");
	toolbar.rows[1].cells[12].setAttribute("id","tool15");
	set_attribute(toolbar.rows[1].cells[12],img2[15],"img2[15]","two",true);
	
	toolbar.onselectstart = function () { return false; }//禁止toolbar被选中
	
	return toolbar;
}

function set_selectoptions(id,str_id)
{
	var op=new Array();
	var text=new Array();
	id.setAttribute("id",str_id);
	switch(str_id)
	{
	 	case "select1":		    
			op[0]=document.createElement("option");
			text[0]=document.createTextNode("五号");