posts - 59, comments - 244, trackbacks - 0, articles - 0
  BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理

html编辑器(自己记录用)

Posted on 2011-03-12 22:39 penngo 阅读(493) 评论(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>

效果图:

只有注册用户登录后才能发表评论。


网站导航: