国产开源富文本编辑器 wangEditor 新版公开测试

前言

先上 demo 为敬！

两个月之前我写过一篇 wangEditor 新版本(WIP...) 功能和体验介绍，当时编辑器新版刚开始要内部测试。
然后这两个月的主要工作：

完成内部测试
写单元测试
修复高优 bug
梳理 github 已经积累的约 4000 issues
用户文档
完善周边功能（Vue3 组件，i18n，CI/CD 等）

现在，wangEditor v5 版本已经完成了内部测试、重要 bug 修复，现开始开放给用户公开测试。

用户文档（写的很详细，包括：下载、使用、配置、API...）
- 中文 www.wangeditor.com/v5/
- 英文 www.wangeditor.com/v5/en/
demo
- 中文 www.wangeditor.com/demo/zh-CN/
- 英文 www.wangeditor.com/demo/en/
github 源码 github.com/wangeditor-…

还可以加入 V5 体验 qq 群 681464059 ，我会重点关注该群的反馈。

什么是公开测试？

免费的公开测试，可能会有人觉得，这是拿自己当小白鼠，做实验。
其实并不是的，而且有本质区别 —— 如果诱导或者强制你使用，那你是小白鼠。而这里我们已经告诉你了实情，你可以随意把玩一下，玩完就走，这不是小白鼠。

建议参与公开测试的人群：

对开源项目/富文本编辑器感兴趣的，想看看功能，看看源码
未来有富文本编辑器使用需求的，想来调研一下
正在使用 v4.x 版本，对 v5 版本抱有一些期望的

总之，是对你个人有收益的行为。

另外，公测期间提出的问题，我们会高优关注并修复。

快速开始

你需要的所有内容，都可以在文档中找到。此处演示一下编辑器的基本使用。
PS：这一版 wangEditor 直接提供了 Vue React 组件，不用再自己封装，看文档即可。

import '@wangeditor/editor/dist/css/style.css'
import { createEditor, createToolbar } from '@wangeditor/editor'

// 定义编辑器配置
const editorConfig = {}
editorConfig.placeholder = '请输入内容'
editorConfig.onChange = (editor: IDomEditor) => {
    // 当编辑器选区、内容变化时，即触发
    console.log('content', editor.children)
    console.log('html', editor.getHtml())
    console.log('text', editor.getText())
}

// 创建编辑器
const editor = createEditor({
  selector: '#editor-container',
  config: editorConfig
})
// 创建工具栏
const toolbar = createToolbar({
  editor,
  selector: '#toolbar-container'
})
复制代码

这样即可创建一个基本的编辑器

新版的主要变化

升级 L1 能力

新版本弃用了 document.execCommand API 。
使用 slate.js 为内核，自己封装了 view 层，所以不再依赖于 React 。

基于 slate 的数据模型，未来会探索协同编辑器。目前已经有了一些解决方案，如 slate-yjs 和 slate-collaborative。

57 个内置菜单

在 demo 中执行 editor.getAllMenuKeys() 即可看到所有内置菜单。可以通过菜单配置来配置这些菜单的现实和隐藏。

丰富的 API

新版 wangEditor 内置了丰富的 API ，能满足你对编辑器的所有操作要求。包括：

config 相关 API
内容处理 API
节点操作 API
DOM 操作 API
selection 选区 API
自定义事件
（可继续使用 slate.js 提供的 API）

配置增强

新版本增加了生命周期 Hooks onCreated onDestroyed onChange ，还增加了 maxLength 功能。

另外，随着编辑器配置增多，编辑器把所有配置做了拆分：

编辑器配置，如生命周期、readonly、focus 等
工具栏配置，增删、排序工具栏菜单项
各个菜单配置，如字体、行高、颜色、上传图片等

体验增强

如下图。某些适合下拉的菜单，做成了 <select> 的格式，体验更好。

如下图。可以把某几个菜单折叠起来，hover 时下拉现实。可执行配置，参考文档。

如下图。在不同情况下，可自动 disable 不需要的菜单，以免引起误操作。

如下图。当选中文字、图片、表格、链接，可以显示 hover 菜单。

另外，新版 wangEditor 优化了代码块的功能，借助 prism.js 实现代码高亮，体验更好。

扩展性增强

slate 是基于插件机制的，wangEditor 新版本是基于 module 扩展机制的。即出了插件之外，module 还包括其他的功能，是一个功能模块的组合。
其实编辑器内置的功能，也是通过这种 module 机制扩展的，你可以通过源码看到。

export interface IModuleConf {
  // 注册菜单
  menus: Array<IRegisterMenuConf>

  // 渲染 modal -> view
  renderTextStyle: RenderTextStyleFnType
  renderElems: Array<IRenderElemConf>

  // to html
  textStyleToHtml: TextStyleToHtmlFnType
  textToHtml: TextToHtmlFnType
  elemsToHtml: Array<IElemToHtmlConf>

  // slate 插件
  editorPlugin: <T extends IDomEditor>(editor: T) => T
}
复制代码

如何扩展，请查阅文档。

安全性增强

既然弃用了 document.execCommand 就不能直接操作 DOM 了。又基于 slate 的数据模型，所以使用 vdom 进行视图更新，我们是基于 snabbdom.js 来做 vdom patchView 。

使用 vdom 本身就可以过滤一部分 XSS 工具。另外代码中还对直接输出 html 的部分做了特殊字符的过滤，目前没有发现 XSS 的风险。

官方提供提供 Vue React 组件

目前已提供 Vue2.x Vue3 和 React 组件，使用方便，具体直接查阅文档。

其他框架像 svelte ng 等，发布之后再根据用户需求添加。

新版本删减的（相比于 v4.x）

todo 菜单

v4.x 版本有 todo 菜单，如下图：

新版本暂时放弃了这个功能，因为判断它为非必需功能。而且 v5 需要考虑代码体积、研发进度。

但，如果在公开测试期间，大家如果强烈需要该功能，我们会高优开发。用户的核心需求必须要保证！

上传视频

新版本只有插入视频链接，没有上传视频。
视频属于大文件，上传机制和图片不一样，实现起来非常复杂。而且，对于用户自己的服务端接口也有要求。

所以，暂时不做视频上传。
待用户反馈之后，再根据需要开发，不闭门造车。

带样式的粘贴（请重点关注！）

如果你整体看过 wangEditor 历年来的所有 bug ，你会发现粘贴的 bug 占比是非常大的。
即，带样式的粘贴是一个非常复杂的模块，做的不好会惹很多的麻烦。

它不适合内置到编辑器中开发，编辑器已经够复杂了。它适合单独开发、单独测试。然后用插件形式集成进来。
所以，带样式的粘贴，不是不做了，而是后面再单独做。用扩展插件的形式。

当然，如果你想要自己实现，可以借用 customPaste 配置来实现。
不过我提醒一下：1. 如果你自己写着玩玩，那随便玩；2. 如果是公司的项目，这种事别轻易接手，接了可能就再也放不下了。

何时正式发布？

正式发布还有几件大事：

经过一段时间的公测，修复 bug
公测期间，用户呼声比较高的功能，需要继续开发上
完成单元测试（尚有部分非核心 API 未纳入单元测试，正在进心中）

请放心试用。随未正式发布，但新版本的 bug 和功能我们会高优关注。

感谢团队成员

v5 从调研、开发，到最后内部测试，工期超过 6 个月，目前手写代码 2.4w 行（未来还会继续完善单元测试、编写 e2e 测试代码）。为此我衷心感谢这期间参与研发和测试的团队成员。

8 位参与研发的成员
14 位参与内部测试的成员

特别感谢

echoLC 负责单元测试、CI/CD
TGuoW 搞定了非常棘手的拼音输入问题

总结

先保证基本功能、基本框架的稳定。
等正式发布之后，再去通过插件来扩展编辑器的生态。

争做国内体验 Z 好的开源富文本编辑器！