教學演示-UBB,剪貼板,textRange及其他

更新時間：2006年11月01日 00:00:00 作者：

這是一個給新手學習代碼的帖子，包含以下內容：
如何使用UBB代碼，如何用js與剪貼板交互，如何使用textRange對象，如何使用自定義的快捷鍵操作，如何自動隨窗口大小調整頁面內容尺寸，正則表達式的使用等等
請仔細閱讀代碼，有問題請?zhí)釂?，目前代碼開發(fā)完成度80％，IE only

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "standards-compliant mode" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=gb2312" /> <title>Blue Idea UBB Code Edit</title> <style> * {     margin:0px;     padding:0px; } html, body {     background-color:buttonface;     width:100%;     height:100%;     overflow:hidden;     border-width:0px;     font-size:13px;     font-family:Verdana Arial 宋體;     color:#333333;     cursor:default; } input {border-width:1px;} #divMain {     overflow:hidden; } #divTools {     width:100%;     height:20px;     line-height:20px;     overflow:hidden;     border-bottom:1px solid buttonshadow;     margin:0px;     padding:0px;     padding-left:10px;     background-color:buttonface;     color:black; } #divTools label { font-weight:bold;float:left;padding-left:15px;padding-right:15px;} #divTools a {     display:block;     float:left;     height:20px;     padding-left:15px;     padding-right:15px;     line-height:20px;     text-align:center;     overflow:hidden;     color:black;     text-decoration:none; } #divTools a:hover {background-color:gold;color:black;} #divTools a:active {background-color:navy;color:white;} #divContent, #txtContent {     border:1px inset buttonface;     width:94%;     height:400px;     overflow:auto;     padding:5px;     margin:2px 15px 0px 15px;     background-color:white;     color:black;     display:none; } #txtContent {     font-size:14px;     border-width:1px;     display:block; } .UBB_code {     border:1px solid #555;     padding:10px;     margin:10px;     width:500px;     background-color:#DDD;     font-size:13px;     font-weight:normal;     color:black;      } .UBB_html {     padding:4px;     width:350px;     height:200px;     font-size:13px;     font-weight:normal;     color:black; } .UBB_html_button {     width:100px;     height:22px;     line-height:18px;     border-width:2px;     margin:0px; } </style>  </head> <body onload="init();"> <div   class="vvxyksv9kd"   id="divMain"> <div   class="vvxyksv9kd"   id="divTools"> <label>視圖模式:</label> <a href="javascript:void(switchModel(0));" id="viewButton01" >代碼視圖</a> <a href="javascript:void(switchModel(1));" id="viewButton02" >預覽視圖</a> <label> | 樣式工具:</label> <a href="javascript:void(setUBB('b'))" title="ctrl + b">黑體</a> <a href="javascript:void(setUBB('i'))" title="ctrl + shift + i">斜體</a> <a href="javascript:void(setUBB('c'))" title="ctrl + shift + c">代碼</a> <a href="javascript:void(setUBB('h'))" title="ctrl + shift + h">HTML 運行</a> <a href="javascript:void(setUBB('+'))" title="ctrl + +">字體 + </a> <a href="javascript:void(setUBB('-'))" title="ctrl + -">字體 - </a> <a href="javascript:void(chkPaste())" title="ctrl + shift + v">粘貼UBB</a> <a href="javascript:void(chkPasteH())" title="ctrl + alt + v">粘貼HTML</a> </div> <div   class="vvxyksv9kd"   id="divContent" contentEditable="false"> </div> <textarea id="txtContent"></textarea> </div> </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

您可能感興趣的文章: