前言
目前还未更新完毕,进度在使用中的第十二小节自定义扩展菜单这个位置。
在下第一次录视频,所以有很多不足的地方还请大家多多担待。
视频主要流程分为三个阶段:
- wangEditor 的简介
- wangEditor 使用文档
- wangEditor 源码分析
每个阶段都有其对应的小章节内容。
关于编辑器的使用的话我会尽量都会去用代码做演示。
如果那些内容不够详细或者说我没有演示的,可以给在视频或者文章乃至群里评论留言,我会根据情况去补充内容的。
wangEditor 的简介
由于简介部分录的比较早,所以有些信息比较过时,我考虑在录完所有内容去重新录制简介的
发展历史
在下于2020年6月21日开始申请,2020年7月开始正式加入团队的
于2014年11月发布了第一版,2016年2月发布了第二版,2017年三月份发布了第三版,然后作者因为工作繁忙无奈停止了更新,但是作者并不甘心,在2020年春季因为某些原因业余时间增多,又重新开始把这个项目做起来了,并痛定思痛认真思考了之前被迫停止维护的问题,明白仅靠个人是不行的,决定组建团队,一起开发和维护。
从2020年5月开始着手去做,6月开始组建开源团队,直到国庆假期(2020年10月1日 - 2020年7日)之后,V4 终于发布了。
是用来做什么的?
wangEditor 是一款用 TypeScript 和 CSS 开发的轻量级 Web 富文本编辑器。
解决的核心问题是什么?
大家对 编辑器 的作用其实都了然于胸,不外乎添加、编辑网站上的文章或者内容。
也就是提供所见即所得的功能。
提供了那些功能?
wangEditor目前总共提供了:
- 标题
- 加粗
- 文字大小
- 文字字体
- 斜体
- 下划线
- 删除线
- 缩进
- 行高
- 文字颜色
- 背景颜色
- 插入链接
- 序列
- 对齐方式
- 引用
- 表情
- 插入图片/上传图片
- 插入视频
- 插入表格
- 插入代码
- 分割线
- 撤销
- 重做
- ...... 后续还会不断更新更多的功能
使用文档
这里我就不写重复的内容了,具体的使用和目录 使用文档 里面都有
使用文档 详细的介绍了如何去使用和配置 wangEditor 的。
这部分我也会带着大家跟着文档去敲代码,并展示编辑器的行为以及一些注意的点。
源码分析
我会先带着大家去了解一下,源码里面每个目录是做什么的,有什么用。
然后一看看 wangEditor 编辑器是如何创建的,创建的中间经历了哪些流程,菜单是如何对编辑区域内的文字进行操作的。
我会给大家一一道来。