能在自己的Web页面中实现可视HTML编辑器,是一件让人心动的事情。如果您使用了IE5.0 Brower, 不防看看下面的实现方法。
一、基础工作
首先当然是收集常见的一些Button图片,比如Cut(),居中(),加粗()等,这不是一件难事,打开FrontPage 2000, 按下Print(屏蔽Copy)键,然后到Photoshop中Paste,将选择区域设置为固定大小(16*16),然后一个一个选择Cut,Ctrl+N(新建),Paste,Save optimizied即可,当然如果您找到直接的Gif文件,就不需要这样做。
只有字体色彩选择图片()和画笔的色彩选择图片()有一点技巧,为了能让用户选择了不同色彩时,相应的字体色彩(或者画笔色彩)的下方能出现相关的色彩,您可以将图片下方一小片区域Delete掉,这样下方即可形成透明色,然后将图片的背景色设置为需要的色彩即可,比如红色的字体色彩为,蓝色的即就为。而在Javascript则可用:图片的ID号.style.backgroundColor=Color 来实现。
另一个技巧便是怎样在Web中形成动态鼠标效果,如下:
在Intranet中实现这样的方法非常多,有的采用捕获Mouse方法,有的采用多图片方法等等。在此,笔者则采用动态Css方法来实现,这样不仅简单,而且非常容易编写程序。
我们首先定义一组能产生Up,Dwon和正常效果的样式,如下:(以下的效果是在背景色为d0d0c8上产生的,若您的背景色不是,请修改rgb值即可)
<style>
.Up
再编写一个小函数,如下:(t表示某个td对象,n表示显示的效果,1=Up ,2=Down;其它表示正常)
function Check(t,n)
{
if(n==1) t.className ="Up"
else if(n==2) t.className ="Down" else t.className ="None"
}
那么在HTML中加入如下代码:<td class=None οnmοusedοwn=Check(this,2) οnmοuseοver="Check(this,1)" οnmοuseοut="Check(this,0)" οnmοuseup="Check(this,1)"></td> 即可大功告成。
以上所见的是一些基本工作,下面言归正传,真正开始我们的Visual Web HTML Editor之旅。
二、可视Web HTML Editor的实现方法
想在web页面中实现可视WebHTML Editor,是不能使用textarea对象的,因为它只能实现文本的输入。有一个非常好用的东东,那就是Iframe可以帮助我们来完成这功能(什么?IFrame?),是的,没错,就是Iframe.
将以下代码入放一个HTML文件中,然后用IE5.0打开它。
<iframe ID="EditorID" width=100% height=100></iframe> <script> EditorID.document.designMode="On"; </script> |
您会发现什么?
选中一些字符,按下Ctrl+B ,Ctrl+I,Ctrl+U ,再按下Ctrl+F,Ctrl+K.....Haha!Editor真正成了一个编辑器,而且是可视的。不要吓着了,您已经实现了您的Visual Web HTML Editor!(没有搞错吧?是的,没有错,您已经实现了您的Visual Web HTML Editor)。
这一切都应该归功于document对象的designModel属性.它表示当前的文档设计模式,黩认为"Off",表示文档不可编辑,但当您将其设置为"On",即可成为可编辑的,因此您便像在FrontPage中使用它一样。
实现了编辑,我们只是完成了第一步,您还需要知道怎样为字体加色彩、加粗、设置大小,甚至插入图片、去掉格式等一系列功能。因此,我们还需要进一步来学习相关的这些知识。
一旦用户在文档中做了selection,您便可以使用下列的代码来访问它(selection.createRange()方法:从当前选择区中创建一个TextRange对象)。
edit = EditorID.document.selection.createRange();
那么: RangeType = Editor.document.selection.type; 即可表示用户选中的对象类别,如Text,Control等。如果您想在用户选择的区域为设计字体大小,字体色彩等功能,您还需要用到该对象的execCommand()方法,它表示在给定选择区或上条命令:
语 法: | bSucces=object.execCommand(sCommand[,bUserInterface][,vVlaue]) |
参 数: |
|
返回值: | 布尔值,若成功,返回true,否则返回false |
注 释: | 等待调用execCommand方法,直到而被加载之后。 |
因此如果您想加入将用户当前的选择的字体设置为"黑体",那么您需要做的工作如下:
edit = EditorID.document.selection.createRange();
edit.execCommande("FontName",false,"黑体");
而加入居中方式则为:
edit = EditorID.document.selection.createRange();
edit.execCommande("JustifyCenter")即可。
但如果您想直接插入HTML代码,则需要用到pasteHTML()方法,比如您想插入一张图片http://www.i0713.net/images/logo/1.gif,则需要如下:
edit = EditorID.document.selection.createRange();
edit.pasteHTML("<img src='http://www.i0713.net/images/logo/1.gif'>");
当前如果你只想插入一段文字(比如:<img src='http://www.i0713.net/images/logo/1.gif'>),则可直接使用text属性,如:
edit = EditorID.document.selection.createRange();
edit.text="<img src='http://www.i0713.net/images/logo/1.gif'>";
以下即是我设计的"可视HTML编辑器",它模仿了FrontPage的一些基本功能,IE打开它时,效果如下:
以下为可视HTML编辑的相关HTML代码:
<head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>可视HTML编辑器</title> <style> td,a,p,input,select {font-size:9pt;font-face:menu}; .Up{ border-left: 1Px solid rgb(233,244,249); border-right: 1px solid rgb(12,12,12); border-bottom: 1px solid rgb(12,12,12); border-top: 1px solid rgb(233,244,249); cursor:hand; } .Down { border-right: 1Px solid rgb(233,244,249); border-left: 1px solid rgb(12,12,12); border-top: 1px solid rgb(12,12,12); border-bottom: 1px solid rgb(233,244,249); cursor:hand; } .None{ border-top: 1Px solid rgb(208,208,200); border-left: 1px solid rgb(208,208,200); border-bottom: 1px solid rgb(208,208,200); border-right: 1px solid rgb(208,208,200); cursor:hand;} </style> <script language="JavaScript"> var Format = "Normal"; //当前的模式:Normal,Html,Preview var initHTML = ""; //初始化的内容 var CssFile=""; var edit; //当前选择的文本编辑区域对象 var RangeType; //对象类别 var CssFile=""; var returnValue=""; function setFocus() { Editor.focus(); } function fixSize() { document.all.Editor.style.height = Math.max(document.body.clientHeight - document.all.Editor.offsetTop, 0); } function selectRange(){ edit = Editor.document.selection.createRange(); RangeType = Editor.document.selection.type; } function execCommand(command,para) { if (Format == "Normal"){ setFocus(); selectRange(); if ((command == "Undo") || (command == "Redo")) document.execCommand(command); else if (para=="") edit.execCommand(command); else edit.execCommand(command, false, arguments[1]); Editor.focus(); if (RangeType != "Control") edit.select(); } } function swapModes(Mode) { switch(Mode){ case "Normal": if (Format == "Html") Editor.document.body.innerHTML = Editor.document.body.innerText; else { initHTML = Editor.document.body.innerHTML; initEditor("On"); } break; case "Html": if (Format == "Preview"){ initHTML = Editor.document.body.innerHTML; initEditor("On"); } Editor.document.body.innerText = Editor.document.body.innerHTML; break; default: var strHTML = ""; if(Format == "Html") initHTML = Editor.document.body.innerText; else initHTML = Editor.document.body.innerHTML; initEditor("Off"); break; } Editor.focus(); Format=Mode; } function pasteMark(Mark) //paste有标志 { var strHTML; if (Mark=='') return(0); setFocus(); selectRange(); var t=Mark.split(" "); if (Mark=="hr") strHTML="<hr>" else strHTML = "<" + Mark + ">" + edit.text + "</" + t[0] + ">"; if (Format == "Normal") edit.pasteHTML(strHTML); else edit.text=strHTML; Editor.focus(); edit.select(); } function pasteHTML(HTML) //直接paste内容 { setFocus(); selectRange(); if (Format == "Normal") edit.pasteHTML(HTML); else edit.text=HTML; Editor.focus(); edit.select(); } function initEditor(Model) { Editor.document.designMode=Model; Editor.document.open(); Editor.document.write(initHTML); Editor.document.close(); initHTML = ""; if(CssFile!="") Editor.document.createStyleSheet(CssFile); Editor.document.body.style.fontFamily = ""; Editor.document.body.style.fontSize =""; } function Check(t,n) { if(n==1) t.className ="Up" else if(n==2) t.className ="Down" else t.className ="None" } function InsertAttach() { alert("您选择了插入附件功能"); } function InsertImage() { alert("您选择了插入图片功能"); } function CheckOS() { if((window.navigator.userAgent.indexOf("IE 5") < 1) && (window.navigator.userAgent.indexOf("IE 6") < 1)) { alert("请使用Microsoft Internet Explorer 5.0/n或更高版本的浏览器!"); window.close(); } } function SelectFormat(Status) //编辑模式的更改 { swapModes(Status); switch(Status) //需要更改的编辑模式 { case "Normal": Html.style.display="none"; Preview.style.display="none"; Normal.style.display="block"; break; case "Html": Normal.style.display="none"; Preview.style.display="none"; Html.style.display="block"; break; default: Normal.style.display="none"; Html.style.display="none"; Preview.style.display="block"; break; } return(false); } function showHelp() { showModalDialog("help.htm","","dialogWidth:350px;dialogHeight:250px;status:no;"); } function addTable() { if(Format!="Preview") { ReturnValue=window.showModalDialog("AddTable.htm","", "dialogWidth=310px;dialogHeight=150px;status=0"); if(ReturnValue && ReturnValue!="") pasteHTML(ReturnValue); } } function doFormat(what,para,Mark) { if(Format!="Preview") if (Format=='Normal') execCommand(what,para); else pasteMark(Mark); } function doSelectClick(str,el,Mark) { if(Format!="Preview") { var Index = el.selectedIndex; if (Index != 0) { el.selectedIndex = 0; if (Format=='Normal' && el.id != "OtherFormat") doFormat(str,el.options[Index].value); else pasteMark(Mark); } } } function SelectColor(id) { var c=window.showModalDialog("SelectColor.htm",id.style.backgroundColor, "dialogWidth=420px;dialogHeight=340px;status=0"); if(c && c!="") id.style.backgroundColor=c; } </script> </head> <body SCROLL="no" bgcolor=d0d0c8 οnlοad="initEditor('ON');" leftmargin=5 topmargin=5> <table width="100%" height="100%" cellSpacing="0" cellPadding="0"> <tr height=40> <td> <table cellSpacing="1" cellPadding="1" WIDTH=400> <tr align=middle> <td class=None οnmοusedοwn=Check(this,2) οnmοuseοver="Check(this,1)" οnmοuseοut="Check(this,0)" οnmοuseup="Check(this,1)" title="粗体" οnclick="doFormat('Bold','','b')"> <IMG src="../HTMLEditor/Images/B.gif" width="16" height="16"></td> <td class=None οnmοusedοwn=Check(this,2) οnmοuseοver="Check(this,1)" οnmοuseοut="Check(this,0)" οnmοuseup="Check(this,1)" title="斜体" οnclick="doFormat('Italic','','i')"> <IMG src="../HTMLEditor/Images/I.gif" width="16" height="16"></td> <td class=None οnmοusedοwn=Check(this,2) οnmοuseοver="Check(this,1)" οnmοuseοut="Check(this,0)" οnmοuseup="Check(this,1)" title="下划线" οnclick="doFormat('Underline','','u')"><IMG src="../HTMLEditor/Images/U.gif" width="16" height="16"></td> <td width="4"><IMG src="images/separator.gif" width="4" height="18"></td> <td class=None οnmοusedοwn=Check(this,2) οnmοuseοver="Check(this,1)" οnmοuseοut="Check(this,0)" οnmοuseup="Check(this,1)" title="撤销" οnclick="doFormat('Undo','','')"> <IMG src="../HTMLEditor/Images/Undo.gif" width="16" height="16"></td> <td class=None οnmοusedοwn=Check(this,2) οnmοuseοver="Check(this,1)" οnmοuseοut="Check(this,0)" οnmοuseup="Check(this,1)" title="恢复" οnclick="doFormat('Redo','','')"><IMG src="../HTMLEditor/Images/Redo.gif" width="16" height="16"></td> <td width="4"><IMG src="images/separator.gif" width="4" height="18"></td> <td class=None οnmοusedοwn=Check(this,2) οnmοuseοver="Check(this,1)" οnmοuseοut="Check(this,0)" οnmοuseup="Check(this,1)" title="左对齐" οnclick="doFormat('JustifyLeft','','p align=left')" ><IMG src="../HTMLEditor/Images/Left.gif" width="16" height="16"></td> <td class=None οnmοusedοwn=Check(this,2) οnmοuseοver="Check(this,1)" οnmοuseοut="Check(this,0)" οnmοuseup="Check(this,1)" title="居中" οnclick="doFormat('JustifyCenter','','p align=center')" ><IMG src="../HTMLEditor/Images/Center.gif" width="16" height="16"></td> <td class=None οnmοusedοwn=Check(this,2) οnmοuseοver="Check(this,1)" οnmοuseοut="Check(this,0)" οnmοuseup="Check(this,1)" title="右对齐" οnclick="doFormat('JustifyRight','','p align=right')" ><IMG src="../HTMLEditor/Images/Right.gif" width="16" height="16"></td> <td width="4"><IMG src="images/separator.gif" width="4" height="18"></td> <td class=None οnmοusedοwn=Check(this,2) οnmοuseοver="Check(this,1)" οnmοuseοut="Check(this,0)" οnmοuseup="Check(this,1)" title="剪切" οnclick="doFormat('Cut','','')"><IMG src="../HTMLEditor/Images/Cut.gif" width="16" height="16"></td> <td class=None οnmοusedοwn=Check(this,2) οnmοuseοver="Check(this,1)" οnmοuseοut="Check(this,0)" οnmοuseup="Check(this,1)" title="复制" οnclick="doFormat('Copy','','')"><IMG src="../HTMLEditor/Images/Copy.gif" width="16" height="16"></td> <td class=None οnmοusedοwn=Check(this,2) οnmοuseοver="Check(this,1)" οnmοuseοut="Check(this,0)" οnmοuseup="Check(this,1)" title="粘贴" οnclick="doFormat('Paste','','')"> <IMG src="../HTMLEditor/Images/Paste.gif" width="16" height="16"></td> <td class=None οnmοusedοwn=Check(this,2) οnmοuseοver="Check(this,1)" οnmοuseοut="Check(this,0)" οnmοuseup="Check(this,1)" title="删除" οnclick="doFormat('Delete','','')"> <IMG src="../HTMLEditor/Images/Delete.gif" width="16" height="16"></td> <td width="4"><IMG src="images/separator.gif" width="4" height="18"></td> <td class=None οnmοusedοwn=Check(this,2) οnmοuseοver="Check(this,1)" οnmοuseοut="Check(this,0)" οnmοuseup="Check(this,1)" title="插入链结" οnclick="doFormat('CreateLink','','')"><IMG src="../HTMLEditor/Images/Link.gif" width="16" height="16"></td> <td class=None οnmοusedοwn=Check(this,2) οnmοuseοver="Check(this,1)" οnmοuseοut="Check(this,0)" οnmοuseup="Check(this,1)" title="添加附件" οnclick="InsertAttach();" ><IMG src="../HTMLEditor/Images/UpFile.gif" width="16" height="16"></td> <td class=None οnmοusedοwn=Check(this,2) οnmοuseοver="Check(this,1)" οnmοuseοut="Check(this,0)" οnmοuseup="Check(this,1)" title="插入图片" οnclick="InsertImage()"><IMG src="../HTMLEditor/Images/Image.gif" width="16" height="16"></td> <td class=None οnmοusedοwn=Check(this,2) οnmοuseοver="Check(this,1)" οnmοuseοut="Check(this,0)" οnmοuseup="Check(this,1)" title="插入表格" οnclick="addTable()"> <IMG src="images/table.gif" width="16" height="16"></td> <td width="4"><IMG src="images/separator.gif" width="4" height="18"></td> <td class=None οnmοusedοwn=Check(this,2) οnmοuseοver="Check(this,1)" οnmοuseοut="Check(this,0)" οnmοuseup="Check(this,1)" title="背景颜色" οnclick="doFormat('BackColor',bkcolorimg.style.backgroundColor+'', 'font style=BACKGROUND-COLOR:'+bkcolorimg.style.backgroundColor)" width="18"><IMG id=bkcolorimg style="BACKGROUND-COLOR: #ffffff" src="images/colorpen.gif" width="16" height="16"></td> <td class=None οnmοusedοwn=Check(this,2) οnmοuseοver="Check(this,1)" οnmοuseοut="Check(this,0)" οnmοuseup="Check(this,1)" title="选择背景颜色" style="FONT-WEIGHT: normal; FONT-SIZE: 5pt" οnclick="SelectColor(bkcolorimg)" width="7" >▼</td> <td class=None οnmοusedοwn=Check(this,2) οnmοuseοver="Check(this,1)" οnmοuseοut="Check(this,0)" οnmοuseup="Check(this,1)" title="字体颜色" οnclick="doFormat('ForeColor',colorimg.style.backgroundColor+'', 'font color='+colorimg.style.backgroundColor)" width="18"> <IMG id=colorimg style="BACKGROUND-COLOR: #000000" src="images/fontcolor.gif" width="16" height="16"></td> <td class=None οnmοusedοwn=Check(this,2) οnmοuseοver="Check(this,1)" οnmοuseοut="Check(this,0)" οnmοuseup="Check(this,1)" title="选择字体颜色" style="FONT-WEIGHT: normal; FONT-SIZE: 5pt; LINE-HEIGHT: normal; FONT-STYLE: normal; FONT-VARIANT: normal" οnclick="SelectColor(colorimg)" width="7">▼</td> <td width="4"><IMG src="images/separator.gif" width="4" height="18"></td> <td class=None οnmοusedοwn=Check(this,2) οnmοuseοver="Check(this,1)" οnmοuseοut="Check(this,0)" οnmοuseup="Check(this,1)" title="帮助" οnclick="showHelp()"><IMG src="images/help.gif" width="16" height="16"></td> </tr> </table> <table cellSpacing="1" cellPadding="1" width="400"> <tr align=middle> <td width="60"> <select id="select1" style="width: 60; height: 20" οnchange="doSelectClick('FormatBlock',this,this.value); this.returnValue=false;" name="select1" size="1"> <option selected value="">(标题)</option> <option value="PRE">Pre<option value="H1">H1 <option value="H2">H2<option value="H3">H3 <option value="H4">H4<option value="H5">H5 <option value="H6">H6<option value="H7">H7 </select></td> <td width="80"> <select style="width: 80; height: 20" οnchange="doSelectClick('FontName',this,'font face="'+this.value+'"')" name="selectFontName" size="1"> <option selected>(字体)</option> <option value="Arial">Arial</option> <option value="Arial Black">Arial Black</option> <option value="Arial Narrow">Arial Narrow</option> <option value="MS Outlook">MS Outlook</option> <option value="宋体">宋体<option value="楷体_GB2312">楷体 <option value="隶书">隶书<option value="黑体">黑体 <option value="仿宋_GB2312">仿宋</option> </select></td> <td width="60"><select style="width: 60; height: 20" οnchange="doSelectClick('FontSize',this,'font size='+this.value);" name="selectFontSize" size="1"> <option selected>(大小)</option> <option value="1">1<option value="2">2<option value="3">3 <option value="4">4<option value="5">5<option value="6">6 <option value="7">7</option></select></td> <td width="80"><select id="OtherFormat" style="width: 75; height: 20" οnchange="doSelectClick('FormatBlock',this,this.value); this.returnValue=false;" size="1" name="selectFoontFormat"> <option selected>(格式)</option><option value="SUP">上标 <option value="SUB">下标<option value="DEL">删除线<option value="BIG">增大字体 <option value="SMALL">减小字体</option></select> </td> <td width="4"><IMG src="images/separator.gif" width="4" height="18"></td> <td class=None οnmοusedοwn=Check(this,2) οnmοuseοver="Check(this,1)" οnmοuseοut="Check(this,0)" οnmοuseup="Check(this,1)" title="减小缩进" οnclick="doFormat('Outdent','','')" width="16"><IMG src="images/outdent.gif" width="16" height="16"></td> <td class=None οnmοusedοwn=Check(this,2) οnmοuseοver="Check(this,1)" οnmοuseοut="Check(this,0)" οnmοuseup="Check(this,1)" title="增加缩进" οnclick="doFormat('Indent','','BLOCKQUOTE')" width="16"> <IMG src="images/indent.gif" width="16" height="16"></td> <td class=None οnmοusedοwn=Check(this,2) οnmοuseοver="Check(this,1)" οnmοuseοut="Check(this,0)" οnmοuseup="Check(this,1)" title="插入水平线" οnclick="doFormat('InsertHorizontalRule','','hr')" width="16" > <IMG src="images/hr.gif" width="16" height="16"></td> <td width="4"><IMG src="images/separator.gif" width="4" height="18"></td> <td class=None οnmοusedοwn=Check(this,2) οnmοuseοver="Check(this,1)" οnmοuseοut="Check(this,0)" οnmοuseup="Check(this,1)" title="编号" οnclick="doFormat('FormatBlock','<OL>','ol')" width="16"> <IMG src="images/ol.gif" width="16" height="16"></td> <td class=None οnmοusedοwn=Check(this,2) οnmοuseοver="Check(this,1)" οnmοuseοut="Check(this,0)" οnmοuseup="Check(this,1)" title="项目符号" οnclick="doFormat('FormatBlock','<UL>','ul')" width="16"> <IMG src="images/ul.gif" width="16" height="16"></td> <td width="4"><IMG src="images/separator.gif" width="4" height="18"></td> <td class=None οnmοusedοwn=Check(this,2) οnmοuseοver="Check(this,1)" οnmοuseοut="Check(this,0)" οnmοuseup="Check(this,1)" title="去除格式" οnclick="doFormat('RemoveFormat','','')" width="16"> <IMG src="images/unformat.gif" width="16" height="16"></td> </tr> </table> </td> </tr> <tr height="100%" width="100%"> <td> <IFRAME id="Editor" Name="Editor" style="WIDTH: 100%; HEIGHT: 100%"></IFRAME> </td> </tr> <tr height=15> <td height=15> <map name="Map"> <area shape="RECT" coords="51,1,92,15" href="#" οnclick="return(SelectFormat('Html'));"> <area shape="RECT" coords="93,1,133,15" href="#" οnclick="return(SelectFormat('Preview'));" > </map> <map name="Map2"> <area shape="RECT" coords="6,1,45,16" href="#" οnclick="return(SelectFormat('Normal'));" > <area shape="RECT" coords="93,1,133,15" href="#" οnclick="return(SelectFormat('Preview'));"> </map> <map name="Map3"> <area shape="RECT" coords="5,1,47,15" href="#" οnclick="return(SelectFormat('Normal'));"> <area shape="RECT" coords="47,2,90,15" href="#" οnclick="return(SelectFormat('Html'));"> </map> <div ID=Normal> <table width="100%" border="0" cellspacing="0" cellpadding="0" height=15> <tr> <td align="left"><IMG src="../HTMLEditor/Images/Normal.gif" useMap=#Map border=0 width="135" height="15"> </td> <td align="middle"><IMG src="../HTMLEditor/Images/ScrollL.gif" border=0 width="24" height="15"></td> <td align="middle" width="100%" style="FILTER: Alpha(opacity=50); BACKGROUND-COLOR: white" ></td> <td align="right"><IMG src="../HTMLEditor/Images/ScrollR.gif" border=0 width="19" height="15"></td> </tr> </table> </div> <div ID=Html style="DISPLAY: none"> <table width="100%" border="0" cellspacing="0" cellpadding="0" height=15> <tr> <td align="left"><IMG src="../HTMLEditor/Images/Html.gif" useMap=#Map2 border=0 width="135" height="15"> </td> <td align="middle"><IMG src="../HTMLEditor/Images/ScrollL.gif" border=0 width="24" height="15"></td> <td align="middle" width="100%" style="FILTER: Alpha(opacity=50); BACKGROUND-COLOR: white" ></td> <td align="right"><IMG src="../HTMLEditor/Images/ScrollR.gif" border=0 width="19" height="15"></td> </tr> </table> </div> <div ID=Preview style="DISPLAY: none"> <table width="100%" border="0" cellspacing="0" cellpadding="0" height=15> <tr> <td align="left"><IMG src="../HTMLEditor/Images/Preview.gif" useMap=#Map3 border=0 width="135" height="15"></td> <td align="middle"><IMG src="../HTMLEditor/Images/ScrollL.gif" border=0 width="24" height="15"></td> <td align="middle" width="100%" style="FILTER: Alpha(opacity=50); BACKGROUND-COLOR: white" ></td> <td align="right"><IMG src="../HTMLEditor/Images/ScrollR.gif" border=0 width="19" height="15"></td> </tr> </table> </div> </td></tr></table> </body> |
2.以下源程序将显示Help对话框:
3. 插入表格对话框:
<HTML> <HEAD> <META NAME="GENERATOR" Content="Microsoft FrontPage 4.0"> <TITLE>插入表格</TITLE> <style> td,a,input,select{font-size:9pt}</style> <script> function Ok(control,Name,Min,Max) { var t= parseInt(control.value); if (isNaN(t)) { alert(Name+"必须由数字组成!"); control.select(); control.focus(); return(null); } if(t<Min) { alert(Name+"必须大于或等于"+Min); control.select(); control.focus(); return(null); } if(t>Max) { alert(Name+"必须小于或等于"+Max); control.select(); control.focus(); return(null); } return(t); } function ClickOk() { var t=document.Edit; var iHeight=Ok(t.iHeight,"表格行数",1,50); if(iHeight==null) return(false); var iWidth=Ok(t.iWidth,"表格列数",1,50); if(iWidth==null) return(false); var CellPadding=Ok(t.CellPadding,"单元格边距",0,100); if(CellPadding==null) return(false); var CellSpacing=Ok(t.CellSpacing,"单元格间距",0,100); if(CellSpacing==null) return(false); var Width=Ok(t.Width,"表格宽度",1,2000); if(Width==null) return(false); var Border=Ok(t.Border,"表格边框",0,100); if(Border==null) return(false); var Unit=t.Unit.value; s="<table width=" +Width+Unit+ " cellspacing="+CellSpacing+" cellpadding="+CellPadding+" border=" + Border +">" for(i=1 ;i<=iHeight;i++) { s=s+"<tr>"; for(j=1;j<=iWidth;j++) s=s+"<td> </td>"; s=s+"</tr>" } s=s+"</table>"; window.returnValue=s; window.close(); } function ClickCancel() { window.returnValue=""; window.close(); } </script> </HEAD> <BODY bgcolor=#d0d0c8 topmargin=10 leftmargin=0> <center> <table width="274" border="0" cellpadding="0" cellspacing=2 align=center> <tr> <form name="Edit"> <td width="40" align="right">行数:</td> <td width="40"> <input type="text" name="iHeight" maxlength="3" style="width:35;height: 20" value="2"> </td> <td width="80" align="right">单元格边距:</td> <td width="40"> <input type="text" name="CellPadding" maxlength="3" style="width:35;height: 20" value="0"> </td> <td rowspan="4" width="4" background="Images/Separator.gif"></td> <td width="70" align="right"> <input style="width: 60; height: 21" type="button" name="bntOk" value="确认" οnclick="ClickOk();"> </td> </tr> <tr> <td width="40" align="right">列数:</td> <td width="40"> <input type="text" name="iWidth" size="3" style="width: 35; height: 20" value="2"> </td> <td width="80" align="right">单元格间距:</td> <td width="40"> <input type="text" name="CellSpacing" maxlength="3" style="width:35;height: 20" value="0"> </td> <td width="70" align="right"> <input style="width: 60; height: 21" type="button" name="bntCancel" value="取消" onClick="ClickCancel();"> </td> </tr> <tr> <td width="40" align="right">宽度:</td> <td colspan="3"> <input type="text" name="Width" maxlength="3" style="width:35;height: 20" value="100"><select name="Unit"> <option>px</option> <option value="%" selected>%</option> </select> </td> <td width="66" align="center"></td> </tr> <tr> <td width="40" align="right">边框:</td> <td width="40"> <input type="text" name="Border" maxlength="3" style="width:35;height: 20" value="1"> </td> <td width="80"> </td> <td width="40"> </td> <td width="66"> </td> </form> </tr> </table> </center> </BODY>