不足之处:
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>
类似WORD的文本风格设置技术大揭密
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com 特别注意:本站所有转载文章言论不代表本站观点! 本站所提供的图片等素材,版权归原作者所有,如需使用,请与原作者联系。未经允许不得转载:IDC资讯中心 » 类似WORD的文本风格设置技术大揭密
相关推荐
- 暂无文章
