结合EasyUI一起写的 运行效果

HTML：HTML界面实现HTML代码编译运行界面_html

核心代码 
<section class="main_right" id="main_right">
        <div id="code-test" class="easyui-panel code_test" style="height: 100%;width: 100%;position: relative" title="代码验证">
            <div class="code-test-left">
               <textarea id="textareaCode" onkeypress="coded()">
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>EasyUI和Highcharts介绍与使用</title>
    <link rel="stylesheet" href="./css/main.css">
    <link rel="stylesheet" href="./js/jquery-easyui-1.7.0/themes/default/easyui.css">
    <link rel="stylesheet" href="./js/jquery-easyui-1.7.0/themes/icon.css">
</head>
<body>




</body>
<script src="js/jquery-easyui-1.7.0/jquery.min.js"></script>
<script src="js/jquery-easyui-1.7.0/jquery.easyui.min.js"></script>
<script src="js/json.js"></script>
<script src="js/main.js"></script>
</html>
                </textarea>
       </div>
        <div class="code-test-right">
            <div id='textareaCoded' class="textareaCoded">
                <p id='html_code'> 请输入你的HTML/CSS代码 </p>
            </div>
        </div>
        <a id="codeButton" href="#" class="easyui-linkbutton codeButton" data-options="iconCls:'icon-edit'">编译</a>
    </div>
</section>
css 
.main_right .code_test div{
    height: 100%;
    width: 50%;
    position: relative;
}
.main_right .code_test div textarea{
    height : 90%;
    width: 90%;
    background-color: #ffffc0;
    position: absolute;
    margin-left: 50%;
    transform: translateX(-50%);
    resize:none;
}
.main_right .code_test .code-test-left{
    float: left;
}
.main_right .code_test .code-test-right{
    float: right;
}
.main_right .code_test .code-test-right .textareaCoded{
    height : 90%;
    width: 90%;
    position: absolute;
    margin-left: 50%;
    transform: translateX(-50%);
    background-color: #ffffc0;
    border: 1px solid #000;
    user-select: none;
}
.codeButton{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 30px;
}
js 
$("#codeButton").click(function () {
    document.getElementById("html_code").innerHTML = document.getElementById("textareaCode").value;
});