【代码导读】Github 开源项目——wysihtml5 富编辑器（Bootstrap 风格）【一】

【代码导读】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. 工具栏对话框

为保质量，逐步进行，请君关注 ：）