【代碼導讀】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. 工具欄對話框

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