欢迎光临
我们一直在努力

类似WORD的文本风格设置技术大揭密

建站超值云服务器,限时71元/月

不足之处:
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>  

赞(0)
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com 特别注意:本站所有转载文章言论不代表本站观点! 本站所提供的图片等素材,版权归原作者所有,如需使用,请与原作者联系。未经允许不得转载:IDC资讯中心 » 类似WORD的文本风格设置技术大揭密
分享到: 更多 (0)

相关推荐

  • 暂无文章