實現簡易版富文本編輯器

所謂富文本編輯器（RTE）是指一種能夠內嵌於瀏覽器，所見即所得的文本編輯器，方便用戶在線編輯文章或新消息等。因爲目前市場上的瀏覽器種類繁多，對應的RTE尚未一個統一的標準，但對於最基本的功能，各瀏覽器提供的API基本一致，從而使得編寫一個跨瀏覽器的富文本編輯器成爲可能。

基本原理

咱們一般是利用div和iframe實現文本編輯功能的，其中，若是要在div中編輯文本，需設置其contentEditable=「true」便可，若是要在iframe中編輯文本，需設置designMode=「on」便可。雖然兩種方法都可實現文本編輯，但大都是利用iframe來實現富文本編輯的。

（1）首先，使用iframe能夠解決瀏覽器兼容性問題，能夠方便的在不一樣瀏覽器中獲取選中的文字；

（2）使用iframe編輯文本能夠實現所見即所得的效果，至關於顯示了瀏覽器解析源碼後的內容；

（3）使用iframe但是實現直接在iframe下的document中進行文字操做（經過iframe.contentWindow.document獲取iframe下的document），不會影響到當前文檔。

利用iframe開發富文本編輯器時主要用到documen.execCommand(command,show,value)方法，其中

command：表示要執行的命令名稱，

show：boolean類型，表示是否向用戶顯示命令特定的對話框或消息框，

value：string類型，表示要使用該命令分配的值。

本文的簡易版富文本編輯器中所用到的執行命令主要包括：

加粗命令：documen.execCommand(bold,false,null)；

斜體命令：documen.execCommand(italic,false,null)；

下劃線命令：documen.execCommand(underline,false,null)；

刪除線命令：documen.execCommand(StrikeThrough,false,null)；

左對齊命令：documen.execCommand(justifyleft,false,null)；

居中對齊命令：documen.execCommand(justifycenter,false,null)；

右對齊命令：documen.execCommand(justifyright,false,null)；

有序排序對齊命令：documen.execCommand(insertorderedlist,false,null)；

無序排序對齊命令：documen.execCommand(insertunorderedlist,false,null)；

上傳圖片命令：documen.execCommand(insertImage,false,src)；

添加連接命令：documen.execCommand(createLink,false,href)；

documen.execCommand(command,show,value)方法的執行命令很是繁多，遠不止本文提到的一星半點，具體的執行命令能夠去google上搜索，這裏推薦微軟MSDN上的execCommand method，連接地址http://msdn.microsoft.com/en-us/library/ms536419(v=vs.85).aspx。

效果展現