相信很多人都使用過多種富文字編輯器，富文字編輯器常用於編輯部落格、使用者互動，富文字編輯器分為兩種：所見即所得和非所見即所得
兩種富文字編輯器的實現原理是不相同的。
1. 非所見即所得編輯器
這種編輯器的實現原理很簡單，用textarea元素就可以實現，假如要實現粗體、斜體、下劃線、顏色字、的效果，只需在字的中間加上自定義標籤即可，例如： [b]富文字編輯器[b] ，[img]src=」當然這些規則你得自己通過js進行定製。當post提交後，再把這些標籤轉換為html標籤。
2. 所見即所得編輯器
在1中我提到的幾種效果，我們無法在textarea中見到立竿見影的效果（所見即所得），而文字域本身也只是支援一些字元的輸入，並不支援顯示html。
如何做到編輯像文字域，又能夠即時所見呢？答案就是使用iframe作為內容編輯區域。iframe本身也是乙個巢狀頁面，它如何能夠被編輯呢？這裡有一些關鍵的屬性，它們可以做到讓iframe可以被編輯。
還是直接上**來得方便一些，**也很少。
很重要的幾點
(1). 用ifr.contentdocument || ifr.contentwindow.document方式獲取iframe的文件物件
(2). 分別設定designmode屬性為』on』，contenteditable屬性為』true』讓iframe可編輯
(3). 通過doc.body.innerhtml
但是在實際執行的時候，你是否發現除了chrome瀏覽器外（用ietester, firefox, chrome測試）開啟這個頁面都處於正在載入的狀態（那個輪子轉啊轉，轉個不停…）
只要在doc.write()方法前後加上doc.open(), doc.close()就可以了（在寫之前開啟，寫完之後關閉）。
最後，我們的web程式中經常使用jquery作為基礎類庫，那就把上面的**也改造為jquery吧。**如下：
效果圖如下：
是不是覺得很簡單呢？
【關注】keepfool
所見即所得富文字編輯器實現原理 轉
如何做到編輯像文字域，又能夠即時所見呢？答案就是使用iframe作為內容編輯區域。iframe本身也是乙個巢狀頁面，它如何能夠被編輯呢？這裡有一些關鍵的屬性，它們可以做到讓iframe可以被編輯。但是在實際執行的時候，你是否發現除了chrome瀏覽器外 用ietester,firefox,chrom...
js簡單的文字編輯器（所見即所得）
專案頁面需要乙個簡單的文字編輯器，網上的那些富文字編輯器功能都很強大，很多東西用不到，所以自己用js寫了乙個簡單的文字編輯器。如下 3號字4號字 5號字6號字 7號字 實現原理 1.將id為editarea的div元素新增contenteditable，這個div則擁有了編輯的功能，document...
所見即所得文章編輯器CKEditor的使用方法
2 在 aspx 頁面或者 master 模板頁 標籤中載入 ckeditor.js 在標籤中使用ckeditor runat server 與其他 net 控制項使用方法相同，設定 text 可以方便與資料來源進行互動。3 config.js 的自定義 ckeditor.editorconfig ...