項目頁面需要一個簡單的文本編輯器，網上的那些富文本編輯器功能都很強大，很多東西用不到，所以自己用js寫了一個簡單的文本編輯器。
代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<title>簡單文本編輯器</title>
</head>
<body>
<div
style="width: 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')>
</div>
<div id="editArea" contenteditable style="height: 200px; width: 450px; border: 1px solid; overflow-y: auto;">
</div>
<div align="center" style="width: 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>實現原理：
1.將id爲editArea的div元素添加contenteditable，這個div則擁有了編輯的功能，document執行的execCommand函數就能針對這個div中選中的區域進行相應的操作。
2.至於document的execCommand函數怎麼用的，網上有很多解釋，我就不重複說了。
效果圖如下所示：（在chrome和IE8下顯示的html源碼有點不同，換行回車，chrome用<div>表示的，而IE8則用<p>表示的）
chrome：
IE8:
