<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>在线编辑器</title>
<style type="text/css">
body{
    padding:10px;
    margin:10px;
}
iframe{
    width:600px;
    height:140px;
    border:1px solid gray;
}
a{
    border:1px solid gray;
    padding:2px;
    margin-top:20px;
    cursor:pointer;
    font-size:12px;
}
.t{
    margin:10px 0px 10px 0px;
}
#tag{
    font-size:12px;
    color:red;
}
</style>
<script language="javascript">
var txt = "";
var t = "";window.onload = function(){
    EditArea.document.body.contentEditable="true";
    EditArea.focus();
    edit();
}function code(){
var tag = document.getElementById('tag');
    if(t == "c") return;
    txt = EditArea.document.body.innerHTML;
    EditArea.document.body.innerText = txt;
    tag.innerHTML = "当前为代码模式";
    EditArea.focus();
    t = "c";
}function edit(){
var tag = document.getElementById('tag');
    if(t == "e") return;
    txt = EditArea.document.body.innerHTML;
    txt = txt.Html();
    EditArea.document.body.innerHTML = txt;
    tag.innerHTML = "当前为设计模式";
    EditArea.focus();
    t = "e";
}function submits(){
    alert(txt);
}String.prototype.Html = function(){ 
return this.replace(/'/g, '').replace(/&amp/g, '&').replace(/&quot;/g, '"').replace(/&lt;/g, '<').replace(/&gt;/g, '>');
}
</script>
</head><body>
<div><iframe id="EditArea" name="EditArea" frameborder="0" scrolling="auto"></iframe></div>
<div class="t"><a onclick="edit()">设计模式</a> <a onclick="code()">代码模式</a> <span id="tag"></span></div>
<div><a onclick="submits()">submit</a></div>
</body>
</html>