【代码导读】Github 开源项目——wysihtml5 富编辑器(Bootstrap 风格)【一】
2017-11-16 00:17
465 查看
如果你经常留迹于各大论坛、博客,肯定对它们的富编辑器稍有印象。纯 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 转换(需稍改代码即可)
废话到此,开始导读!
注意,本代码导读将分几个系列进行,欢迎关注。
简介
整体结构
全局变量
基类 Base
基础对象(数组、事件派发、对象操作、字符串)
视图
编辑面板
编辑器
工具栏
Dom 封装
命令管理器
撤销管理器
范围管理器 Rangy
选择管理器 Selection
代码格式化及样式过滤
浏览器兼容性检测
工具栏语音功能
工具栏对话框
为保质量,逐步进行,请君关注 :)
但各种经验总结,无数的解决方案,使得富编辑器能让 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 转换(需稍改代码即可)
废话到此,开始导读!
注意,本代码导读将分几个系列进行,欢迎关注。
简介
整体结构
全局变量
基类 Base
基础对象(数组、事件派发、对象操作、字符串)
视图
编辑面板
编辑器
工具栏
Dom 封装
命令管理器
撤销管理器
范围管理器 Rangy
选择管理器 Selection
代码格式化及样式过滤
浏览器兼容性检测
工具栏语音功能
工具栏对话框
为保质量,逐步进行,请君关注 :)
相关文章推荐
- 【代码导读】Github 开源项目——wysihtml5 富编辑器(Bootstrap 风格)【二】
- 【代码导读】Github 开源项目——wysihtml5 富编辑器(Bootstrap 风格)【一】
- Android资源代码 源码 整理 Github开源项目下载地址
- 如何将开源项目部分代码作为private放在github上?
- 整理的Android资源代码 源码 整理 Github开源项目下载地址
- 8/人天,小记一次 JAVA(APP后台) 项目改造 .NET 过程(后台代码已完整开源于 Github)
- 如何在Github上为开源项目贡献自己的代码
- GitHub上star超过2k的安卓项目和代码风格指南(绝对干货)
- github,怎么向开源项目贡献自己的代码和协作
- Github最火开源项目-一行代码实现ofo小黄车的引导界面
- 【编程初学者】创建自己的开源项目4-将本地代码仓库的代码提交到远程代码仓库(myeclipse + github)
- github发布开源项目代码教程
- 如何将开源项目部分代码作为private放在github上?
- 在GitHub上创建上传下载开源项目代码
- Github网站加载不完全,响应超时,如何解决 Github是一个代码托管平台和开发者社区,开发者可以在Github上创建自己的开源项目并与其他开发者协作编码。毫不夸张地说,高效利用Github是一
- GitHub上star超过2k的安卓项目和代码风格指南
- Android资源代码 源码 整理 Github开源项目下载地址
- github发布开源项目代码教程
- 【编程初学者】创建自己的开源项目3-将远程代码仓库下载,并创建本地代码仓库(myeclipse + github)
- github,怎么向开源项目贡献自己的代码和协作