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

html编辑器（自己记录用）

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

效果图：

只有注册用户登录后才能发表评论。
网站导航: