<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Rich Text Edit</title>
</head>
<body>
<div style=" 450px; height: 30px; border-top: 1px solid; border-left: 1px solid; border-right: 1px solid;">
<select onchange=document.execCommand('FontSize',false,this.value)>
<option value=3>3号字</option>
<option value=4>4号字</option>
<option value=5>5号字</option>
<option value=6>6号字</option>
<option value=7>7号字</option>
</select> <input type=button value="红色" onclick=document.execCommand('ForeColor',false,'#ff0000')>
<input type=button value="绿色" onclick=document.execCommand('ForeColor',false,'#00ff00')>
<input type=button value="蓝色" onclick=document.execCommand('ForeColor',false,'#0000ff')>
<input type=button value="左对齐" onclick="document.execCommand('JustifyLeft')"> <input
type=button value="居中" onclick=document.execCommand('JustifyCenter')>
<input type=button value="右对齐" onclick=document.execCommand('JustifyRight')>
<input type="button" value="图片" onclick=document.execCommand('InsertImage',false,'./img/hzw.jpg')>
</div>
<div id="editArea" contenteditable style="height: 200px; 450px; border: 1px solid; overflow-y: auto;">
</div>
<div align="center" style=" 450px;">
<input type="button" value="↓" onclick='htmlsource.value=editArea.innerHTML;'>
<input type="button" value="↑" onclick='editArea.innerHTML=htmlsource.value;'>
</div>
<div>
<textarea id="htmlsource" name="htmlsource" cols="62" rows="10"></textarea>
</div>
</body>
</html>