【代碼導讀】Github 開源項目——wysihtml5 富編輯器（Bootstrap 風格）【一】

若是你常常留跡於各大論壇、博客，確定對它們的富編輯器稍有印象。純 Javascript 富編輯器能夠說是前臺 JS 腳本的巔峯做品。一款完整的編輯器，其複雜的功能，會讓你遇到各類頭痛的瀏覽器兼容問題，對 JS 功底要求很是之高。

但各類經驗總結，無數的解決方案，使得富編輯器能讓 JS 愛好者們一次性、密集地學習到各類知認、技巧。

目前已經存在好幾款成熟的富編輯器：

http://ckeditor.com/

http://www.tinymce.com/

....

但今天所導讀的這款編輯器卻可能不多有人聽過，這是一款由國外某頂級 JS 大神 xing 獨自編寫，名爲 wysihtml5。

官網地址：https://github.com/xing/wysihtml5

示例：

注意! 該項目雖代碼精良，但已有數年未被維護，對最新幾款瀏覽器的兼容稍顯不足，本文做者在使用該編輯器時，曾遇到很多問題，但已一一解決。若是是大量修改後的版本，且使用了 Bootstrap 樣式。

http://classfoo.com/app/editor

編輯效果能夠前往查看。

以下是本文做者修改後的，其基於 Bootstrap 樣式，固然，您也能夠輕鬆替換爲其它樣式（Semantic UI、foundation...）

查看具體：http://classfoo.com/app/editor。

 

wysihtml5 優點有哪些？

1. 代碼量少

    tinymace.min.js 4.1.6 —— 295KB

    ckeditor.min.js 4.4.5 —— 472KB

    wysihtml5-0.3.0.min.js —— 110KB

　 wysihtml 代碼事實上還有很大壓縮空間，也很容易刪除不須要的代碼，上面編輯器大小不包括素材、皮膚、插件、配置，最終大小可能不止於此，而 wysihtml5 能夠很容易使用對應站點的皮膚，且對應的配置文件很是小，所有加起來作下優化能作到 < 100KB。

2. 容易修改

    代碼量少天生決定了該特定，熟悉代碼後，你能夠根據自已的需求作出相應調整。不考慮插件功能，也不作動態配置，不考慮國際化，不須要層層封裝，架構簡單太多。

3. 容易配置

    包括皮膚、自定義樣式、格式過濾等，不須要了解複雜的配置邏輯，通常直接改下 JSON 對象的值就好了，不用寫一行代碼。

4. 該有的都有

• 通用編輯功能
• 最低支持 IE8
• 跨平臺（官方原本說支持，但很久沒維護了因此。。。不過自已改下代碼量也很少）
• 安全（沙盒、處理髒標籤、髒樣式，清除全部 Javascript 腳本）
• 換膚
• MarkDown 轉換（需稍改代碼便可）

 

廢話到此，開始導讀！

注意，本代碼導讀將分幾個系列進行，歡迎關注。

簡介

1. 總體結構
2. 全局變量
3. 基類 Base
4. 基礎對象（數組、事件派發、對象操做、字符串）
5. 視圖
6. 編輯面板
7. 編輯器
8. 工具欄
9. Dom 封裝
10. 命令管理器
11. 撤銷管理器
12. 範圍管理器 Rangy
13. 選擇管理器 Selection
14. 代碼格式化及樣式過濾
15. 瀏覽器兼容性檢測
16. 工具欄語音功能
17. 工具欄對話框

 爲保質量，逐步進行，請君關注 ：）