<!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>xy的简易编辑器震撼登场,兼容firefox 和 IE</title>  
    
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>  
       
    
<script type="text/javascript">  
    
function init_edit(){   
        
//使iframe进入编辑状态。   
        var editor = document.getElementById("MsgFrame").contentWindow;    
        
//window.frames["MsgFrame"].document.designMode="On"  
        editor.document.open();   
        editor.document.writeln(
'<html><head>');   
        editor.document.writeln(
"</head><body></body></html>");   
        editor.document.onclick 
= "alert()";   
        editor.document.close();   
        editor.document.designMode 
= 'On';   
        editor.document.contentEditable 
= true;   
        editor.document.charset
="gb2312";   
    }   
  
    
function t(s)   
    {  
var editor = document.getElementById("MsgFrame").contentWindow;   
        editor.document.execCommand(s,
false,null);   
    }   
  
    
//增高   
    function t2(){   
          
var obj=window.frames["MsgFrame"].frameElement;   
          
var height = parseInt(obj.offsetHeight);//获取iframe的高度   
          if (height+100 >= 100){   
            obj.height 
= height+100;   
          }   
    }   
       
    
//减低   
    function t3(){   
          
var obj=window.frames["MsgFrame"].frameElement;   
          
var height = parseInt(obj.offsetHeight);   
          
if (height-100 >= 100){   
            obj.height 
= height-100;   
          }   
    }   
       
    
function ViewSource(){   
        document.getElementById(
"textarea1").value =    
           document.getElementById(
"MsgFrame").contentWindow.document.lastChild.innerHTML;   
    }   
  
    window.onload 
= init_edit;   
    
</script>  
</head>  
  
  
  
  
<body>  
  
<!-- 作为编辑区的iframe -->  
<iframe style="width: 100%; height:100" marginwidth="0" marginheight="0"    
        frameborder
="1" name="MsgFrame" id="MsgFrame"  src="about:blank"></iframe>  
<br />  
  
<!-- 一排控制按钮 -->  
<input type="button" onclick="t('UnderLine')" value="下划线" />  
<input type="button" onclick="t('bold')" value="粗体" id="Button1" />    
<input type="button" onclick="t('JustifyLeft')" value="左对齐" />    
<input type="button" onclick="t('JustifyCenter')" value="居中对齐" />    
<input type="button" onclick="t('JustifyRight')" value="右对齐" />    
<input type="button" onclick="t2()" value="增高" />    
<input type="button" onclick="t3()" value="减少" />    
<input type="button" onclick="ViewSource()" value="查看源代码" />    
<br/>  
  
<!-- 用于查看输出 -->  
<textarea name="textarea1" id="textarea1" rows="20" cols="100"></textarea>  
  
</body>  
</html>  

 

posted on 2009-06-26 09:58  钱途无梁  阅读(503)  评论(0编辑  收藏  举报