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

国产开源富文本编辑器 wangEditor 新版 公开测试wangEditor 新版本 v5 版本已经完成了内部测试、重要 bug 修复,现开始开放给用户公开测试。

2022.04 更新

wangEditor V5 已正式发布,查看官网

前言

先上 demo 为敬! 看完 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 好的开源富文本编辑器!

今天的文章国产开源富文本编辑器 wangEditor 新版 公开测试分享到此就结束了,感谢您的阅读。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/23031.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注