wangEditor V4 发布了

3,742 阅读3分钟

从 2020 年 5 月 开始着手做,6 月开始组建开源团队,直到 10.1 假期之前,V4 终于可以发布了。欢迎大家去 官网 看看,也欢迎去 github 点个 star 。

团队作战

团队作战,而不再完全依赖于我个人的精力,这是本次重构升级最大的一次改动 —— 虽然这从产品上暂时看不出来,但未来会体现的越来越明显。

在这次 V4 重构启动之前,wangEditor 已经停更 2 年了。原因就是之前我是个人维护的,完全依赖于我个人的精力。我忙起来,自然也就停更了。

这次 V4 重构之前,我并没有贸然的自己做,而是深入思考了这个问题。所以,我就开始招募成员,组建开源团队,虽然一开始慢一点。

V4 发布之后的 bug 修复,新功能迭代,都会以团队的形式持续稳定的进行。即便是我再忙起来了,也不会影响太多。

PS:关于如何以团队形式做开源项目,我这几个月以来的总结,我会写单独写一篇长文来详细介绍。过两天会发布出来。 (已写完《【长文】wangEditor V4.0 探索以团队的形式做开源项目》

使用 typescript 重构

项目直接从 0 开始,用 ts 重构。ts 的强类型,给代码增加了很多稳定性。招募团队成员时,要求会 ts ,也提高了招募的门槛,保证了团队成员的技术能力。

新功能

相比 V3 版本,V4 增加了一些常用的新功能:

  • 缩进
  • 行高
  • 全屏
  • 插入分割线
  • 代码高亮
  • 拖拽修改图片尺寸
  • 自定义扩展菜单

尚在调研和开发中的有:

  • 待办事项
  • 数学公式
  • 格式刷
  • 上传视频
  • 查看源码

其他功能,大家可以再给我提建议或者 issue 。

tooltip

V4 专门设计了 tooltip 机制,可以通过简单的代码,定义编辑器区域的某个元素,点击时显示什么菜单项。这个能力,也开放给了自定义扩展菜单。

操作稳定性

V4 对于一些复杂的但常用的操作,进行了重新讨论和设计,增加了操作稳定性。如撤销,粘贴。

撤销是完全自己实现的。原生的 document.execCommand('undo'),原生会和其他 <input> 的撤销有冲突。 自己实现撤销,需要定义 undoStackredoStack 两个栈,在 onchange 时记录当前 html 并压栈。相关源码在这里

粘贴文本时。会先将 html 内容,经过 htmlParser 过滤,筛选出可以粘贴的 tag 和 attrs ,判断是否保留 style 和 img ,最后再拼接 html ,粘贴到编辑器中。

自定义扩展菜单

V4 开始,用户又可以自定义扩展菜单了,文档在这里

扩展的菜单涵盖了编辑器内的三种类型:Button DropList 和 Panel 。可以使用 EventHooks 和 Tooltip 。即,目前编辑器所有的菜单能力,全部都开放给了用户。

交流

以上方式,我们都会及时反馈答复。