可运行代码文本框插入html code 更新以后出现乱码。怎么解决？

浏览数：59 / 时间：2015年06月09日

<!doctype html>transition

<a id="timings-demo-btn" href="#" data-mce-href="#">click</a> <br /><div id="timings-demo"><div id="ease" class="demo-box">Ease</div><div id="ease-in" class="demo-box">Ease-in</div><div id="ease-out" class="demo-box">Ease-out</div><div id="ease-in-out" class="demo-box">Ease-in-out</div><div id="linear" class="demo-box">Linear</div><div id="cubic-bezier" class="demo-box">Cubic-bezier</div> </div>

点击更新后自动生成的如上，完全乱掉。

textare 和input button的写法如下：

<textare id="con" style="width:100%;height:400px;font-family:Arial;">


</textarea><br/>
<input id="btn" type="button" value="运行代码"/>

textarea里面的html如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>transition</title>
<style type="text/css">
body{ font-family:Arial;}
#timings-demo{
    border:solid 1px #ccc;
    padding:10px;
    height:400px;
    width:400px;
}
.demo-box{
    width:100px;
    height:50px;
    text-align:center;
    line-height:50px;
    color:#fff;
    background:#96C;
    border-radius:5px;
    box-shadow:inset 0 0 5px rgba(102,153,0,0.5);
    margin-bottom:10px;
}
/*ease效果*/
#ease{ background:#f36; transition:all 5s ease 0.3s;}
/*ease-in*/
#ease-in{
    background:#369;
    transition:all 3s ease-in 0.5s;
}
/*ease-out*/
#ease-out{
    background:#636;
    transition:all 5s ease-out 0s;
}
/*ease-in-out*/
#ease-in-out{
    background:#3e6;
    transition:all 1s ease-in-out 2s;
}
/*linear*/
#linear{
    background:#999;
    transition:all 6s linear 0s;
}
/*cubic-bezier*/
#cubic-bezier{
    background:#6d6;
    transition:all 4s  cubic-bezier 1s;
    }
/*hover状态下或单击click按钮后demo-box产生属性变化*/
#timing-demo.timings-demo-hover .demo-box,
#timings-demo:hover .demo-box{
    transform:rotate(360deg) scale(1.2);
    background:#369;
    border:solid 1px rgba(255,260,255,08);
    border-radius:25px;
    margin-left:280px;
    height:30px;
    line-height:30px;
    margin-bottom:15px;
}
</style>
<script type="text/javascript" src="jquery-2.1.1.min.js"></script>
<script type="text/javascript">
$("timings-demo-btn").ready(function() {
    $("#timings-demo-btn").toggle(
    function(){
        $(this).next("div#timings-demo").addClass("timings-demo-hover");
    },function(){
        $(this).next("div#timings-demo").removeClass("timings-demo-hover");
    }
    )
    
});
</script>
</head>

<body>

<a id="timings-demo-btn" href="#">click</a>
<br/>
<div id="timings-demo">
    <div id="ease" class="demo-box">Ease</div>
    <div id="ease-in" class="demo-box">Ease-in</div>
    <div id="ease-out" class="demo-box">Ease-out</div>
    <div id="ease-in-out" class="demo-box">Ease-in-out</div>
    <div id="linear" class="demo-box">Linear</div>
    <div id="cubic-bezier" class="demo-box">Cubic-bezier</div>
</div>

</body>
</html>