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

前言

先上 demo 为敬!

demo.png

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

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

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

还可以加入 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'
})
复制代码

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

image.png

新版的主要变化

升级 L1 能力

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

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

57 个内置菜单

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

image.png

丰富的 API

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

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

配置增强

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

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

体验增强

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

image.png

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

image.png

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

image.png

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

image.png

另外,新版 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 的风险。

image.png

官方提供提供 Vue React 组件

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

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

新版本删减的(相比于 v4.x)

todo 菜单

v4.x 版本有 todo 菜单,如下图:

image.png

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

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

上传视频

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

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

带样式的粘贴(请重点关注!)

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

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

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

何时正式发布?

正式发布还有几件大事:

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

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

感谢团队成员

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

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

特别感谢

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

总结

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

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

作者:王福朋
链接:https://juejin.cn/post/7016970337522810917
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

THE END
分享
二维码
< <上一篇
下一篇>>
文章目录
关闭
目 录