http://hi.baidu.com/i_ccboy/item/f40ac6fda4a38214fe35822e
你要的是所見即所得HTML編輯器，簡單來說需要幾個基本步驟：
1，需要一個可以編輯同時又可顯效果的編輯框。textarea不行，它只能用來輸入純文本，不能顯示顏色、斜體之類的文字樣式，就像記事本。
你可以使用iframe來實現，修改iframe的designMode屬性使其可以被編輯。
<iframe id="myEditer" width="100%" height="150px"></iframe>
<script>myEditer.document.designMode = 'on';</script>
這樣你就可以在這個iframe區域裏寫字了。
2，選中要添加樣式的文字。通常我們用WORD編輯一段文字的樣式時，一般是先打字，再編輯樣式。所以你需要一個選中要處理文本的方法。JS的 selection.createRange()可以選中文本，返回一個對象，你可以通過訪問該對象的text屬性得到被選中的文本。
<iframe id="myEditer" width="100%" height="150px"></iframe>
<input type="button" value="加粗" οnclick="Bold()">
<script>
myEditer.document.designMode = 'on';
function Bold(){
var sel = myEditer.document.selection.createRange();
alert(sel.text);
}
</script>
3，改變被選中文本的樣式。selection.createRange()選中文本，返回一個對象，該對象有一個方法execCommand()，可以用來改變被選中文本的樣式。
<iframe id="myEditer" width="100%" height="150px"></iframe>
<input type="button" value="加粗" οnclick="Bold()">
<script>
myEditer.document.designMode = 'on';
function Bold(){
var sel = myEditer.document.selection.createRange();
//alert(sel.text);
sel.execCommand("Bold")
}
</script>
execCommand()的常用用法：
字體--宋體、黑體、楷體等
execCommand("fontname","",字體)
字號--字號大小
execCommand("fontsize","",字號)
加重
execCommand("Bold")
斜體
execCommand("Italic")
下劃線
execCommand("Underline")
刪除線
execCommand("StrikeThrough")
居左
execCommand("JustifyLeft")
居右
execCommand("JustifyRight")
居中
execCommand("JustifyCenter")
剪切
execCommand("Cut")
拷貝
execCommand("Copy")
粘貼
execCommand("Paste")
取消操作--IE5.0以後可以無限取消
execCommand("Undo")
重複操作
execCommand("Redo")
把上面的每個用法用按鈕來實現，你就已經完成了一個簡單的可視文本編輯器。
------------------------------------------------------------------------------------------------
HTML在線編輯器實際上是什麼
其實有好幾種實現方式，目前用得最多、兼容性最好的還是iframe方式。
<iframe src="" frameborder="0"></iframe>
只有這個空iframe是不行的，還要用Javascript把它設成可編輯：
iframe.contentWindow.document.designMode = "on";
iframe.contentWindow.document.contentEditable = true;
換而言之，HTML在線編輯器就是一個可編輯的iframe。
加粗、斜體、下劃線、加鏈接等功能如何實現
瀏覽器已經提供了實現這些功能的接口execCommand：
iframe.contentWindow.document.execCommand(cmd, isDefaultShowUI, value);
這三個參數的意思分別是：
cmd：命令文本，有好多，IE的可以看這裏，Firefox的可以看這裏。
isDefaultShowUI：是否默認顯示交互界面，比如加鏈接的時候，可以通過界面填入鏈接。不過這個參數存在兼容性問題，一般設爲false將其禁用，並另外製作交互界面。
value：傳入的值，某些命令可以省略。
execCommand的問題是，生成的代碼可能不標準，比如在IE下，文字加粗用的是b標籤而不是strong標籤。
交互問題
用戶不可能總是在編輯器中輸入，比如加粗、插入圖片等功能是通過按鈕操作的。假設用戶要加粗一段選中的文字，當他按了加粗按鈕後，選區以及焦點也會跟着跑到那去，因此選區（選中的文字）丟失，操作也就無法完成；同理，插入圖片時插入位置也會丟失。
也就是說，要保存最後出現在編輯器中的選區。我採取的方案是，當焦點在編輯器內的時候，用一個定時器（setInterval）定時獲取當前選區。選區編程平時很少用，做起來也有很多兼容性問題，主要是參考微軟的MSDN（TextRange ControlRange）和Mozilla的MDC（Range Selection）了。
回車問題
在IE下，按回車是換段落，生成<p>，但在Firefox下是換行，生成的是<br>。要解決這個問題，就要監聽keydown事件，如果檢測到按鍵是回車，就插入“<p></p>”。
獲取標準的代碼
如何獲取編輯的內容呢？這個問題很簡單，只要獲取iframe頁面body中的innerHTML就可以了：
var content = iframe.contentWindow.document.body.innerHTML;
然而，IE下的innerHTML非常不標準：標籤名是大寫的，屬性沒有引號包起來，單標籤也沒有結束符……即便是Firefox下獲取的代碼，也有少量瑕疵。這個時候就要用正則表達式對代碼進行標準化處理。
總結
不多說了，做一遍HTML編輯器，你就會知道CKEditor是多麼強大。
