类似WORD的文本风格设置技术大揭密
来源：岁月联盟
时间：2003-07-11
1.我没有权力贴图，如果有了图片，相信大家对这种技术应该比较容易理解。
2.还有这段代码并没有完全列出风格设置的全部，还有其他部分功能将不段的完善。
<html>
<head>
<title>发言区</title>
<SCRIPT language=javascript>
function dologin()
{
var doc = document.fmain;
var text = frames.comment.document.body.innerText;
var html = frames.comment.document.body.innerHTML;
if(doc.subject.value=="")
{
alert("You must enter subject");
doc.subject.focus();
return false;
}
if(doc.subject.length>200)
{
alert("The subject is larger,pls increame it");
doc.subject.focus();
return false;
}
if ((html == "") || (text == ""))
{
frames.comment.focus();
alert("You must enter Comment");
return false;
}
document.fmain.comment.value = html;
return true;
}
</SCRIPT>
</head>
<body>
<table>
<form action="saveword.asp" method="post" name="fmain" onsubmit="return dologin()">
<tr bgcolor="#09C165">
<td width="20%" bgcolor="#FFFFFF" height="23" align="right">文章主题:*</td>
<td width="88%" bgcolor="#F7F7F7" height="23"><input type="text" name="subject" size="50"></td>
</tr>
<tr bgcolor="#F7F7F7">
<td width="20%" valign="top" bgcolor="#FFFFFF" height="51" align="right">内容:<font color="#008000">*</font></td>
<td width="88%" bgcolor="#F7F7F7" height="51">
<SCRIPT LANGUAGE="JavaScript">
<!--
//鼠标事件的工具栏按钮的处理
var buttonImage_normal = new Image ();
buttonImage_normal.src = "images/button_normal.gif";
var buttonImage_up = new Image ();
buttonImage_up.src = "images/button_up.gif";
var buttonImage_down = new Image ();
buttonImage_down.src = "images/button_down.gif";
// -->
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
<!--
//显示风格和字体字符的处理
function flipImage_disc (imageTagName, newImageObject)
{
if (document.images)
{
document [imageTagName].src = newImageObject.src;
}
return true;
}
function setStyle_message (newStyle)
{
var selection = frames.comment.document.selection.createRange ();
selection.execCommand (newStyle);
frames.comment.focus();
return true;
}
function setFont_message ()
{
var selectedRange = frames.comment.document.selection.createRange ();
selectedRange.execCommand ("FontName", true, document.fmain.FontName.options [document.fmain.FontName.selectedIndex].value);
selectedRange.execCommand ("FontSize", true, document.fmain.FontSize.options [document.fmain.FontSize.selectedIndex].value);
selectedRange.select ();
frames.comment.focus();
return true;
}
// -->
</SCRIPT>
<!-- 文本格式处理工具栏 -->
<TABLE BORDER="0" WIDTH="449" BGCOLOR="#CCCCCC" CELLPADDING="0" CELLSPACING="0">
<TR >
<TD WIDTH="300" BACKGROUND="images/toolbar.gif" height="20">
<TABLE BORDER="0" WIDTH="300" CELLPADDING="0" CELLSPACING="0">
<TR >
<TD WIDTH="5" height="14">
<IMG SRC="images/toolbar_spacer.gif" ALT=" " BORDER="0" WIDTH="5" HEIGHT="20" />
</TD>
<TD WIDTH="25" height="14">
<IMG SRC="images/button_normal.gif" ALT="Bold" BORDER="0" WIDTH="25" HEIGHT="20" ID="bold" NAME="bold" onmouseover="flipImage_disc('bold', buttonImage_up)" onmouseout="flipImage_disc ('bold', buttonImage_normal)" onmousedown="flipImage_disc ('bold', buttonImage_down); setStyle_message ('bold'); return false;" onmouseup="flipImage_disc ('bold', buttonImage_up); return false;" />
</TD>
<TD WIDTH="25" height="14">
<IMG SRC="images/button_normal.gif" ALT="Italic" BORDER="0" WIDTH="25" HEIGHT="20" ID="italic" NAME="italic" onmouseover="flipImage_disc('italic', buttonImage_up)" onmouseout="flipImage_disc ('italic', buttonImage_normal)" onmousedown="flipImage_disc ('italic', buttonImage_down); setStyle_message ('italic'); return false;" onmouseup="flipImage_disc ('italic', buttonImage_up); return false;" />
</TD>
<TD WIDTH="25" height="14">
<IMG SRC="images/button_normal.gif" ALT="Underline" BORDER="0" WIDTH="25" HEIGHT="20" ID="underline" NAME="underline" onmouseover="flipImage_disc('underline', buttonImage_up)" onmouseout="flipImage_disc ('underline', buttonImage_normal)" onmousedown="flipImage_disc ('underline', buttonImage_down); setStyle_message ('underline'); return false;" onmouseup="flipImage_disc ('underline', buttonImage_up); return false;" />
</TD>
<TD WIDTH="25" height="14">
<IMG SRC="images/toolbar_spacer.gif" ALT=" " BORDER="0" WIDTH="5" HEIGHT="20" />
</TD>
<TD WIDTH="25" height="14">
<IMG SRC="images/button_normal.gif" ALT="Left" BORDER="0" WIDTH="25" HEIGHT="20" ID="justifyleft" NAME="justifyleft" onmouseover="flipImage_disc('justifyleft', buttonImage_up)" onmouseout="flipImage_disc ('justifyleft', buttonImage_normal)" onmousedown="flipImage_disc ('justifyleft', buttonImage_down); setStyle_message ('JustifyLeft'); return false;" onmouseup="flipImage_disc ('justifyleft', buttonImage_up); return false;" />
</TD>
<TD WIDTH="25" height="14">
<IMG SRC="images/button_normal.gif" ALT="Centre" BORDER="0" WIDTH="25" HEIGHT="20" ID="justifycenter" NAME="justifycenter" onmouseover="flipImage_disc ('justifycenter', buttonImage_up)" onmouseout="flipImage_disc ('justifycenter', buttonImage_normal)" onmousedown="flipImage_disc ('justifycenter', buttonImage_down); setStyle_message ('JustifyCenter'); return false;" onmouseup="flipImage_disc ('justifycenter', buttonImage_up); return false;" />
</TD>
<TD WIDTH="25" height="14">
<IMG SRC="images/button_normal.gif" ALT="Right" BORDER="0" WIDTH="25" HEIGHT="20" ID="justifyright" NAME="justifyright" onmouseover="flipImage_disc ('justifyright', buttonImage_up)" onmouseout="flipImage_disc ('justifyright', buttonImage_normal)" onmousedown="flipImage_disc ('justifyright', buttonImage_down); setStyle_message ('JustifyRight'); return false;" onmouseup="flipImage_disc ('justifyright', buttonImage_up); return false;" />
</TD>
<TD WIDTH="25" height="14">
<IMG SRC="images/button_normal.gif" ALT="Justify" BORDER="0" WIDTH="25" HEIGHT="20" ID="justifyfull" NAME="justifyfull" onmouseover="flipImage_disc ('justifyfull', buttonImage_up)" onmouseout="flipImage_disc ('justifyfull', buttonImage_normal)" onmousedown="flipImage_disc ('justifyfull', buttonImage_down); setStyle_message ('JustifyFull'); return false;" onmouseup="flipImage_disc ('justifyfull', buttonImage_up); return false;" />
</TD>
<TD WIDTH="5" height="14">
<IMG SRC="images/toolbar_spacer.gif" ALT=" " BORDER="0" WIDTH="5" HEIGHT="20" />
</TD>
<TD WIDTH="25" height="14">
<IMG SRC="images/button_normal.gif" ALT="Bulleted List" BORDER="0" WIDTH="25" HEIGHT="20" ID="bulleted" NAME="bulleted" onmouseover="flipImage_disc ('bulleted', buttonImage_up)" onmouseout="flipImage_disc ('bulleted', buttonImage_normal)" onmousedown="flipImage_disc ('bulleted', buttonImage_down); setStyle_message ('InsertUnorderedList'); return false;" onmouseup="flipImage_disc ('bulleted', buttonImage_up); return false;" />
</TD>
<TD WIDTH="25" height="14">
<IMG SRC="images/button_normal.gif" ALT="Numbered List" BORDER="0" WIDTH="25" HEIGHT="20" ID="numbered" NAME="numbered" onmouseover="flipImage_disc ('numbered', buttonImage_up)" onmouseout="flipImage_disc ('numbered', buttonImage_normal)" onmousedown="flipImage_disc ('numbered', buttonImage_down); setStyle_message ('InsertOrderedList'); return false;" onmouseup="flipImage_disc ('numbered', buttonImage_up); return false;" />
</TD>
<TD WIDTH="5" height="14">
<IMG SRC="images/toolbar_spacer.gif" ALT=" " BORDER="0" WIDTH="5" HEIGHT="20" />
</TD>
<TD WIDTH="25" height="14">
<IMG SRC="images/button_normal.gif" ALT="Indent" BORDER="0" WIDTH="25" HEIGHT="20" ID="indent" NAME="indent" onmouseover="flipImage_disc ('indent', buttonImage_up)" onmouseout="flipImage_disc ('indent', buttonImage_normal)" onmousedown="flipImage_disc ('indent', buttonImage_down); setStyle_message ('Indent'); return false;" onmouseup="flipImage_disc ('indent', buttonImage_up); return false;" />
</TD>
<TD WIDTH="25" height="14">
<IMG SRC="images/button_normal.gif" ALT="outdent" BORDER="0" WIDTH="25" HEIGHT="20" ID="outdent" NAME="outdent" onmouseover="flipImage_disc ('outdent', buttonImage_up)" onmouseout="flipImage_disc ('outdent', buttonImage_normal)" onmousedown="flipImage_disc ('outdent', buttonImage_down); setStyle_message ('Outdent'); return false;" onmouseup="flipImage_disc ('outdent', buttonImage_up); return false;" />
</TD>
<TD WIDTH="5" height="14">
<IMG SRC="images/toolbar_spacer.gif" ALT=" " BORDER="0" WIDTH="5" HEIGHT="20" />
</TD>
</TR>
</TABLE>
</TD>
<TD WIDTH="185">
<!-- 字体字号设置工具栏 -->
<table border="0" width="100%" cellspacing="0" cellpadding="0" height="23">
<tr>
<td width="33%" height="23">
<SELECT NAME="FontName" onchange="setFont_message (); return false;">
<OPTION VALUE="宋体" SELECTED />宋体
<OPTION VALUE="楷体" />楷体
<OPTION VALUE="隶书" />隶书
<OPTION VALUE="黑体" />黑体
</SELECT>
</td>
<td width="33%" height="23">
<SELECT NAME="FontSize" onchange="setFont_message (); return false;" size="1">
<OPTION VALUE="3" />普通
<option value="1">1(8磅)</option>
<OPTION VALUE="2" />2(10磅)
<OPTION VALUE="3" />3(12磅)
<OPTION VALUE="4" />4(14磅)
<OPTION VALUE="5" />5(18磅)
<OPTION VALUE="6" />6(24磅)
<OPTION VALUE="7" />7(36磅)
</SELECT>
</td>
<td width="34%" height="23">
<!--工具栏按钮之间的分隔图 -->
<IMG SRC="images/toolbar_spacer.gif" ALT=" " BORDER="0" WIDTH="5" HEIGHT="20" />
</td>
</tr>
</table>
</TD>
</TR>
</TABLE>
<!--文本内容输入框，相当于textarea-->
<IFRAME NAME="comment" ID="comment" WIDTH="450" HEIGHT="160">
</IFRAME>
<BR />
<INPUT NAME="comment" VALUE="" TYPE="hidden" />
<SCRIPT LANGUAGE="JavaScript">
<!--
var editControl = frames.comment.document;
editControl.designMode = "On";
// -->
</SCRIPT>
</td>
</tr>
<tr bgcolor="#F7F7F7">
<td width="88%" bgcolor="#F7F7F7" height="25" colspan=2>
<input type="submit" value=" 发表 ">
</td>
</tr>
</form>
</table>
</body>
</html>
上一篇：使用WSH读取注册表
