上一篇：在网页中调用本地的应用程序(转自CSDN） >>
类似WORD的文本风格设置技术大揭密
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>
下一篇：可以输入的下拉框，我重新写了一下 >>
相关文章：
- · Behavior学习笔记(六)
- · Behavior学习笔记（三）
- · Behavior学习笔记（四）
- · Behavior学习笔记（二）
- · Behavior学习笔记（一）
- · 什么是ubb代码（转）？
- · 做WEB热键
- · 召集Button Event
- · Displaying All of the Form Variables
- · 有趣的javascript程序：抓不到我！
- · 动态JS程序二例
- · 25种风格各异的菜单 (2)
- · 25种风格各异的菜单 (1)
- · A～Z、0～9以及功能键的各键值编号
- · 截获回车键的方法，并模拟Tab键
- · 字母输入的JS，仍然是捕获键盘输入的。
- · 超级 HTML HTMLEditor ---- winXP 风格 [2]
- · html 生成艺术字
- · 超级 HTML HTMLEditor ---- winXP 风格 [1]
- · 字节数最小的中国城市JavaScrip列表（转）
- · Wscript.Shell 对象详细介绍！！
- · 非常好的东西，有助于学习css虑镜，转msdn [1]
- · 非常好的东西，有助于学习css虑镜，转msdn [2]
- · 经常看见有人问能不能实现这个效果：下拉选框中输入文字。想实现的进来看看
- · 非常好的东西，有助于学习css虑镜，转msdn [3]
- · 做一个酷酷的在线编辑器（-）
- · 做一个酷酷的在线编辑器（二）
- · 在《INPUT TYPE=“FILE”》里单击打开的浏览文件时，可以只显示JPG和GIF文件吗？
- · 怎么在html中include 一个文件内容！
- · How to Build Tables Dynamically(二)
- · How to Build Tables Dynamically(-)
- · 关于Window.open的参数小结（参书改编）
- · 试试看这个，可能和你的要求不一样，但是可是实现一样的功能
- · string.substring();
- · 如何使用MsgBox？
- · js中，有什么函数可以令数字每千位就加一“,”，还有什么函数可以保留小数后两位
- · 重写表格－－[js源码]你如果用的上，这就是好东西.
- · -3