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

如果你经常留迹于各大论坛、博客，肯定对它们的富编辑器稍有印象。纯 Javascript 富编辑器可以说是前台 JS 脚本的巅峰作品。一款完整的编辑器，其复杂的功能，会让你遇到各种头痛的浏览器兼容问题，对 JS 功底要求非常之高。

但各种经验总结，无数的解决方案，使得富编辑器能让 JS 爱好者们一次性、密集地学习到各种知认、技巧。

目前已经存在好几款成熟的富编辑器：

....

但今天所导读的这款编辑器却可能很少有人听过，这是一款由国外某顶级 JS 大神 xing 独自编写，名为 wysihtml5。

示例：

注意! 该项目虽代码精良，但已有数年未被维护，对最新几款浏览器的兼容稍显不足，本文作者在使用该编辑器时，曾遇到不少问题，但已一一解决。如果是大量修改后的版本，且使用了 Bootstrap 样式。

编辑效果可以前往查看。

如下是本文作者修改后的，其基于 Bootstrap 样式，当然，您也可以轻松替换为其它样式（Semantic UI、foundation...）

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. 该有的都有

废话到此，开始导读！

注意，本代码导读将分几个系列进行，欢迎关注。

简介

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

巴特西