wangEditor V4 使用&源码 视频

1,220 阅读3分钟

前言

wangEditor V4 使用&源码 视频地址

目前还未更新完毕,进度在使用中的第十二小节自定义扩展菜单这个位置。

在下第一次录视频,所以有很多不足的地方还请大家多多担待。
视频主要流程分为三个阶段:

  1. wangEditor 的简介
  2. wangEditor 使用文档
  3. 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目前总共提供了:

  1. 标题
  2. 加粗
  3. 文字大小
  4. 文字字体
  5. 斜体
  6. 下划线
  7. 删除线
  8. 缩进
  9. 行高
  10. 文字颜色
  11. 背景颜色
  12. 插入链接
  13. 序列
  14. 对齐方式
  15. 引用
  16. 表情
  17. 插入图片/上传图片
  18. 插入视频
  19. 插入表格
  20. 插入代码
  21. 分割线
  22. 撤销
  23. 重做
  24. ...... 后续还会不断更新更多的功能

使用文档

这里我就不写重复的内容了,具体的使用和目录 使用文档 里面都有

使用文档 详细的介绍了如何去使用和配置 wangEditor 的。
这部分我也会带着大家跟着文档去敲代码,并展示编辑器的行为以及一些注意的点。

源码分析

我会先带着大家去了解一下,源码里面每个目录是做什么的,有什么用。
然后一看看 wangEditor 编辑器是如何创建的,创建的中间经历了哪些流程,菜单是如何对编辑区域内的文字进行操作的。
我会给大家一一道来。