能在自己的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>
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
