posts - 59, comments - 244, trackbacks - 0, articles - 0
            BlogJava :: 首頁 :: 新隨筆 :: 聯系 :: 聚合  :: 管理

          html編輯器(自己記錄用)

          Posted on 2011-03-12 22:39 penngo 閱讀(500) 評論(0)  編輯  收藏 所屬分類: javascript

          這幾天有點蛋疼,有個新系統的HTML編輯器居然在IE6下部分功能不能用,想讓客戶升級下IE版本,結果客戶的機子有些舊系統只能在IE6下運行,不能升級。只好用最笨的方法把部分代碼抽出來在IE6下調試。本文是把自己寫的一小部分調試代碼記錄下,下次找起來時方便點。
          exec.htm

          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

          <html xmlns="http://www.w3.org/1999/xhtml">
          <head>
              
          <title>無標題頁</title>
          </head>
          <body>
          <script language="javascript">
          var brower = function(){
              
          var a = navigator.userAgent.toLowerCase();
              
          if(a.indexOf("msie"> -1){
                  
          var re = new RegExp("msie\\s?([\\d\\.]+)""ig");
                  
          var arr = re.exec(a);
                  
          if(parseInt(RegExp.$1>=5.5){
                      
          return "IE";
                  }

              }

              
          else if(a.indexOf("firefox"> -1){
                  
          return "FF";
              }

          }
          ();

          function execCom(cmd){
              document.execCommand(cmd, 
          """");
          }

          function code(){
              
          var fram = document.getElementById("editFrame").contentWindow;
              
          var bo = fram.document.body.innerHTML;
              document.getElementById(
          "myarea").value = bo;
          }

          function inserCode(){
              
          var value = document.getElementById("myarea").value;
              
          var fram = document.getElementById("editFrame").contentWindow;
              fram.document.body.innerHTML 
          = value;
          }

          </script>



          <table>
              
          <tr>
                  
          <td colspan="2">
                      
          <input type="button" onclick="execCom('UNDO')" value="撤消" />
                      
          <input type="button" onclick="execCom('REDO')" value="重復" />
                      
          <input type="button" onclick="code()" value="查看源碼" />
                      
          <input type="button" onclick="inserCode()" value="插入源碼" />
                  
          </td>
              
          </tr>
              
          <tr>
                  
          <td>
                      
          <textarea id="myarea" style="background-color:#99b6d5;width:200px; height:400px;" cols="10" >  
                      
          </textarea>
                  
          </td>
                  
          <td>
                      
          <iframe id="editFrame" src="my.htm" width="300px" height="400px" />
                  
          </td>
              
          </tr>
              
          <tr>
                  
          <td>
                      
                  
          </td>
              
          </tr>
          </table>
          </body>
          </html>

          my.htm
          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

          <html xmlns="http://www.w3.org/1999/xhtml">
          <head>
              
          <title>無標題頁</title>
          </head>
          <body contentEditable="true" style="background-color:#99b6d5;">
          <input type="button" value="確認" />
          <input type="text" />
          <input type="button" value="復選框" />
          </body>
          </html>

          效果圖:
          主站蜘蛛池模板: 扶余县| 且末县| 柳林县| 河东区| 华蓥市| 吉木萨尔县| 河池市| 怀柔区| 阿克陶县| 康保县| 昭通市| 岗巴县| 兴宁市| 宝清县| 博乐市| 栾川县| 温宿县| 自治县| 荣成市| 精河县| 苏州市| 岑巩县| 昌吉市| 潜山县| 宾阳县| 福贡县| 留坝县| 大城县| 抚宁县| 当涂县| 凉城县| 青浦区| 上饶市| 北海市| 古丈县| 鄂州市| 汝南县| 永和县| 镇康县| 宣恩县| 安图县|