打造属于自己的可视Web HTML编辑器_动网_社区论坛·开发者网络源动力

　　能在自己的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中形成动态鼠标效果，如下：

mouse 不在对象上时：
mouse 移到对象上时：
mouse 在对象上压下时：

　　在intranet中实现这样的方法非常多，有的采用捕获mouse方法，有的采用多图片方法等等。在此，笔者则采用动态css方法来实现，这样不仅简单，而且非常容易编写程序。

　　我们首先定义一组能产生up,dwon和正常效果的样式，如下：（以下的效果是在背景色为d0d0c8上产生的，若您的背景色不是，请修改rgb值即可)

<style>
.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>

　　再编写一个小函数，如下：（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 onmousedown=check(this,2) onmouseover="check(this,1)" onmouseout="check(this,0)" onmouseup="check(this,1)"></td>　即可大功告成。

　　以上所见的是一些基本工作，下面言归正传，真正开始我们的visual web html editor之旅。

二、可视web html editor的实现方法

　　想在web页面中实现可视webhtml editor，是不能使用textarea对象的，因为它只能实现文本的输入。有一个非常好用的东东，那就是iframe可以帮助我们来完成这功能（什么?iframe？),是的，没错，就是iframe.

　　将以下代码入放一个html文件中，然后用ie5.0打开它。

　　您会发现什么？

　　选中一些字符，按下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])
参　数：	scommand:必选项，表示要执行的命令。它可以是任何有效的命令标识符。更多的信息请参阅： http://msdn.microsoft.com/workshop/author/dhtml/reference/commandids.asp buseinterface 可选项。表明是否显示用户界面的值，如果支持的话。此值可为true或者fasle,黪认为false. vvalue 可选项，可分配的字符串、数值或者其它值，可能的值取决于scommand.
返回值：	布尔值，若成功，返回true,否则返回false
注　释：	等待调用execcommand方法，直到而被加载之后。

因此如果您想加入将用户当前的选择的字体设置为"黑体",那么您需要做的工作如下：

edit = editorid.document.selection.createrange();
edit.execcommande("fontname",false,"黑体");

　　而加入居中方式则为：

edit = editorid.document.selection.createrange();
edit.execcommande("justifycenter"）即可。

　　但如果您想直接插入html代码，则需要用到pastehtml()方法，比如您想插入一张图片/ShowImg.asp?p=/2006-3-29/27311salogoa1.gif,则需要如下：

edit = editorid.document.selection.createrange();
edit.pastehtml("<img src='/ShowImg.asp?p=/2006-3-29/27311salogoa1.gif'>");

当前如果你只想插入一段文字(比如：<img src='/ShowImg.asp?p=/2006-3-29/27311salogoa1.gif'>），则可直接使用text属性，如：

edit = editorid.document.selection.createrange();
edit.text="<img src='/ShowImg.asp?p=/2006-3-29/27311salogoa1.gif'>";

三、源程序参考

　　以下即是我设计的"可视html编辑器"，它模仿了frontpage的一些基本功能，ie打开它时，效果如下：

一旦您选择html模式，则：

而preview模式为：

以下为可视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 onload="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 onmousedown=check(this,2) onmouseover="check(this,1)" 
onmouseout="check(this,0)" 
onmouseup="check(this,1)" title="粗体" onclick="doformat('bold','','b')">
<img src="../htmleditor/images/b.gif" width="16" height="16"></td> 
<td class=none onmousedown=check(this,2) onmouseover="check(this,1)" 
onmouseout="check(this,0)" onmouseup="check(this,1)" title="斜体"
 onclick="doformat('italic','','i')">
<img src="../htmleditor/images/i.gif" width="16" height="16"></td> 
<td class=none onmousedown=check(this,2) onmouseover="check(this,1)" 
onmouseout="check(this,0)" onmouseup="check(this,1)" title="下划线" 
onclick="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 onmousedown=check(this,2) onmouseover="check(this,1)" 
onmouseout="check(this,0)" onmouseup="check(this,1)" title="撤销" 
onclick="doformat('undo','','')">
<img src="../htmleditor/images/undo.gif" width="16" height="16"></td> 
<td class=none onmousedown=check(this,2) onmouseover="check(this,1)" 
onmouseout="check(this,0)" onmouseup="check(this,1)" title="恢复" 
onclick="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 onmousedown=check(this,2) onmouseover="check(this,1)"
 onmouseout="check(this,0)" onmouseup="check(this,1)" title="左对齐" 
onclick="doformat('justifyleft','','p align=left')" 
><img src="../htmleditor/images/left.gif" width="16" height="16"></td> 
<td class=none onmousedown=check(this,2) onmouseover="check(this,1)"
 onmouseout="check(this,0)" onmouseup="check(this,1)" title="居中" 
onclick="doformat('justifycenter','','p align=center')" 
><img src="../htmleditor/images/center.gif" width="16" height="16"></td> 
<td class=none onmousedown=check(this,2) onmouseover="check(this,1)" 
onmouseout="check(this,0)" onmouseup="check(this,1)" title="右对齐" 
onclick="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 onmousedown=check(this,2) onmouseover="check(this,1)" 

onmouseout="check(this,0)" onmouseup="check(this,1)" title="剪切" 
onclick="doformat('cut','','')"><img src="../htmleditor/images/cut.gif" 
width="16" height="16"></td> 
<td class=none onmousedown=check(this,2) onmouseover="check(this,1)"
 onmouseout="check(this,0)" onmouseup="check(this,1)" title="复制" 
onclick="doformat('copy','','')"><img src="../htmleditor/images/copy.gif" 
width="16" height="16"></td> 
<td class=none onmousedown=check(this,2) onmouseover="check(this,1)" 
onmouseout="check(this,0)" onmouseup="check(this,1)" title="粘贴" 
onclick="doformat('paste','','')">
<img src="../htmleditor/images/paste.gif" width="16" height="16"></td> 
<td class=none onmousedown=check(this,2) onmouseover="check(this,1)"
 onmouseout="check(this,0)" onmouseup="check(this,1)" title="删除"
 onclick="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 onmousedown=check(this,2) onmouseover="check(this,1)" 
onmouseout="check(this,0)" onmouseup="check(this,1)" title="插入链结" 
onclick="doformat('createlink','','')"><img src="../htmleditor/images/link.gif" 
width="16" height="16"></td> 
<td class=none onmousedown=check(this,2) onmouseover="check(this,1)"
 onmouseout="check(this,0)" onmouseup="check(this,1)" title="添加附件" 
onclick="insertattach();" 
><img src="../htmleditor/images/upfile.gif" width="16" height="16"></td> 
<td class=none onmousedown=check(this,2) onmouseover="check(this,1)" 
onmouseout="check(this,0)" onmouseup="check(this,1)" title="插入图片" 
onclick="insertimage()"><img src="../htmleditor/images/image.gif" width="16" height="16"></td> 
<td class=none onmousedown=check(this,2) onmouseover="check(this,1)" 
onmouseout="check(this,0)" onmouseup="check(this,1)" 
title="插入表格" onclick="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 onmousedown=check(this,2) onmouseover="check(this,1)"
 onmouseout="check(this,0)" onmouseup="check(this,1)" title="背景颜色" 
onclick="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 onmousedown=check(this,2) onmouseover="check(this,1)"
 onmouseout="check(this,0)" onmouseup="check(this,1)" title="选择背景颜色" 
style="font-weight: normal; font-size: 5pt" onclick="selectcolor(bkcolorimg)" width="7"
>▼</td> 
<td class=none onmousedown=check(this,2) onmouseover="check(this,1)" 
onmouseout="check(this,0)" onmouseup="check(this,1)" title="字体颜色" 
onclick="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 onmousedown=check(this,2) onmouseover="check(this,1)" 
onmouseout="check(this,0)" onmouseup="check(this,1)" title="选择字体颜色" 
style="font-weight: normal; 
font-size: 5pt; line-height: normal; font-style: normal; 
font-variant: normal" onclick="selectcolor(colorimg)" width="7">▼</td> 
<td width="4"><img src="images/separator.gif" width="4" height="18"></td> 
<td class=none onmousedown=check(this,2) onmouseover="check(this,1)"
 onmouseout="check(this,0)" onmouseup="check(this,1)" title="帮助" 
onclick="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" 
onchange="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" 
onchange="doselectclick('fontname',this,'font face=&quot'+this.value+'&quot')" 
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" 
onchange="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" onchange="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 onmousedown=check(this,2) onmouseover="check(this,1)" 
onmouseout="check(this,0)" onmouseup="check(this,1)" title="减小缩进"
 onclick="doformat('outdent','','')" width="16"><img src="images/outdent.gif" 
width="16" height="16"></td> 
<td class=none onmousedown=check(this,2) onmouseover="check(this,1)" 
onmouseout="check(this,0)" onmouseup="check(this,1)" title="增加缩进"
 onclick="doformat('indent','','blockquote')" width="16">
<img src="images/indent.gif" width="16" height="16"></td> 
<td class=none onmousedown=check(this,2) onmouseover="check(this,1)" 
onmouseout="check(this,0)" onmouseup="check(this,1)" title="插入水平线" 
onclick="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 onmousedown=check(this,2) onmouseover="check(this,1)" 
onmouseout="check(this,0)" onmouseup="check(this,1)" title="编号"
 onclick="doformat('formatblock','<ol>','ol')" width="16">
<img src="images/ol.gif" width="16" height="16"></td> 
<td class=none onmousedown=check(this,2) onmouseover="check(this,1)"
 onmouseout="check(this,0)" onmouseup="check(this,1)" title="项目符号" 
onclick="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 onmousedown=check(this,2) onmouseover="check(this,1)"
 onmouseout="check(this,0)" onmouseup="check(this,1)" title="去除格式" 
onclick="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="#" onclick="return(selectformat('html'));"> 
<area shape="rect" coords="93,1,133,15" href="#" onclick="return(selectformat('preview'));" > 
</map> 
<map name="map2"> 
<area shape="rect" coords="6,1,45,16" href="#" onclick="return(selectformat('normal'));" > 
<area shape="rect" coords="93,1,133,15" href="#" onclick="return(selectformat('preview'));"> 
</map> 
<map name="map3"> 
<area shape="rect" coords="5,1,47,15" href="#" onclick="return(selectformat('normal'));"> 
<area shape="rect" coords="47,2,90,15" href="#" onclick="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对话框：

<html>
<head>
<meta name="generator" content="microsoft frontpage 4.0">
<title>关于web html editor</title>
<style>td,a,p,input{font-size:9pt;font-face:menu}</style>
</head>
<body bgcolor=#d0d0c8 onload="bntok.focus();">
<center>
<table width="300">
<tr>
<td width="220">

<p style="line-height: 200%"><font color="#ff0000">可视web html编辑器测试版<br> 
</font>　设计： <a 
href="mailto:dragon_jiang@163.net" target=_blank>dragon jiang</a><br> 
　单位： <a 
href="http://soft.icchina.com" target=_blank>广州市爱喜软件有限公司</a><br> 
　初稿： 2001年12月15日</p> 
<p style="line-height: 150%"><font color="#ff0000"> 
使用技巧集锦：<br> 
</font>　ctrl+f：查找　ctrl+k：超连接<br>
　ctrl+b：加粗　ctrl+i：斜体<br>
　ctrl+x：剪切　ctrl+u：下画线<br>
　ctrl+c：复制　ctrl+v：粘贴</p>
</td> 
<td width="70" valign="top"><br>
<input id=bntok type="button" value="确定" name="bntok" 
onclick="window.close();" style="width: 70; height: 21"><br>
</td> 
</tr> 
</table> 
</center>
</body> 
</html>

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>&nbsp;</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="确认" onclick="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">&nbsp;</td> 
<td width="40">&nbsp;</td> 
<td width="66">&nbsp;</td> 
</form> 
</tr> 
</table> 
</center>
</body> 
</html>

4.色彩选择对话：

<html>
<head>
<meta name="generator" content="microsoft frontpage 4.0">
<title>选择色彩值</title>
<style>td,a,p,input,select{font-size:9pt};
td.s{cursor:hand}
</style>
<script>

var c=new array("00","20","40","60","80","a0","c0","ff");
var b=new array("00","80","c0","ff");


function colortable()
{ var n,color,i,j,k;
document.write("<table border=1 width=280>");
n=1;
for(i=3;i>=0;i--)
for(j=7;j>=0;j--)
for(k=7;k>=0;k--,n++)
{ color="#" +b[i]+c[j]+c[k];
if( (n-1) % 16==0) document.write("<tr height=16>");
document.write("<td bgcolor='" +color+"'
 class=s width=16 onclick='clickselcolor(\"" +color+ "\");'></td>");
if(n%16==0) document.write("</tr>");
} 
document.write("</table>"); 
}

function clickcolor(c)
{
curcolor.style.backgroundcolor=c; 
curcolorname.innertext=c;
}
function clickselcolor(c)
{
curselcolor.style.backgroundcolor=c; 
curselcolorname.innertext=c;
}

function clickcancel()
{ window.returnvalue="";
window.close();
}

function clickok()
{
window.returnvalue=curselcolorname.innertext;
window.close();
} 
function init()
{
if (window.dialogarguments)
{ clickcolor(window.dialogarguments);
clickselcolor(window.dialogarguments);
} 
else
{ clickcolor("#f0f0f0"); 
clickselcolor("#f0f0f0");
} 
} 
</script>
</head>
<body bgcolor="#d0d0c8" onload="init();" topmargin=10 leftmargin=10>
<table border="0" align=right height="192" cellspacing="0" cellpadding="0" width=390>
<tr>
<td rowspan="2" height="186" width=290 valign="top">
<script>
colortable();
</script>
</td>
<td width="4" rowspan="2" height="186" valign="top" background="images/separator.gif">　</td>
<td width="100" valign="top" align=center height="50">
<table border="0" >
<tr>
<td>
<input type="button" value="确定" name="bntok" 
style="width: 80; height: 21" onclick="clickok();"></td>
</tr>
<tr>
<td>
<input type="button" value="取消" name="bntcancel" 
style="width: 80; height: 21" onclick="clickcancel();"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="100" align="center" valign="bottom">
选中色彩
<table border="1" width="80" cellspacing height="70">
<tr>
<td width="100%" id="curselcolor">　</td>
</tr>
</table>
<div id="curselcolorname">#c0c0d8</div>
<br>当前色彩
<table border="1" width="80" cellspacing height="70">
<tr>
<td width="100%" id="curcolor">　</td>
</tr>
</table>
<div id="curcolorname">#c0c0d8</div></td>
</tr>
</table>
</body>
</html>

四、参考资料：

　　1)http://msdn.microsoft.com;

　　 2)microsoft corporation 著北京化中兴业展有限公司译人民邮电出版社《动态html参考和开发应用大全》