wangeditor与deaftjs的停止维护,2024编辑器该如何做技术选型(一)

wangeditor暂停维护的声明:

9764cd7a19bc6a3b7c636a685e5e33d9.png

wangeditor是国内开发者开发的编辑器,用户也挺多,但是由于作者时间关系,暂停维护。

deaft的弃坑的声明:

32046fd468e09e820921f9a87d3c72ef.png

draft是Facebook开源的,但是也弃坑了,说明设计的时候存在很大的问题,不然也不会从一个坑跳到另一个坑。

那么2024年编辑器该如何进行技术选型?编辑器这条路太卷了,开源编辑器有十几个,但是每个都会有一些问题,如果想做深入开发,做成类似飞书这种编辑器,没有一款能完全符合要求,都需要花很大的精力来扩展功能,光靠热情来维护一款编辑器很难继续下去。需要3-5个人来维护才能做好前端编辑器。那我们来分析一下我看到比较好的编辑器。

Prosemirror

很早之前看到Prosemirror时,哇,就这么点star,编辑器实现时,忽略了它。后来发现很多大厂都在用它实现,比如WPS的智能文档、印象笔记、gamma。后来想了想star少的原因是因为它并不是开箱即用,属于编辑器框架,大多数人驾驭不了。基于它开源的编辑器tiptap star比较高,还有notion style 的编辑器。如果实现类似飞书这种编辑器,prosemirror是不错的选择,能自定义的东西太多了,而且不依赖框架。

0a340581701c955abff479a8a51810a8.png

它的API设计的力度非常细,把编辑器实现的点基本都考虑到了,下面是我打印出来的源码+指南+API参考,看它的厚度就能感受到它的强大。

ad0f583243a34cd6e8cac077fc8390bf.jpeg

技术选型的最大考量点是它的生态和作者,ProseMirror的作者也是CodeMirror的作者,在编辑器领域有非常多的经验,编辑器设计过程中恰恰需要这种经验,能够想到在不同浏览器、不同手机端都有哪些坑,编辑器需要提供哪些API。

还有一点是看编辑器是否实现了表格功能,因为表格功能实现非常复杂,会涉及到自定义选区、单元格合并、修改列表、添加行列、添加表头、caption等。如果一个编辑器官方未提供一个功能强大的表格,请思考一下是不是还要用它。ProseMirror实现了表格,源码A4纸有60页(单面),可想而知它的复杂度。

Quill

Quill是编辑器里Star最多的,也是我最熟悉的编辑器,在早期非常流行,应用非常广,比如微信小程序、知乎、微软、石墨文档等都在用它。发布以来,已经历了12年,是一个比较老的编辑器库,目前稳定版本是1.3.7,中途3年处于停止维护状态,不过现在作者正在筹划发布2.0.0版本。Quill 2位核心成员:

  • luin (子骅)

目前工作于 Slab,一个提供企业知识管理服务的 SaaS 产品。曾就职于石墨文档,管理一个将近一百人的技术团队。偶尔会写一些文章,出版过一本技术书 《Redis 入门指南》。眼下(2022年)主要写一些 WYSIWYG 文档编辑器代码,部分工作会开源到 Quill 项目中。其他时间会写一些 Elixir, Swift, Node.js 项目。

  • Jason Chen

Quill的创建者,Slab的CEO。Slab是个提供企业知识管理服务的 SaaS 产品,它的编辑器使用的正是Quill。

从上面两位作者的经历来看,Quill编辑器由Slab公司使用,那么在很大程度上能够保证它持续维护迭代,除非Slab这家公司倒闭。目前发布了2.0rc-5版本,很快会发布2.0版本。

不过它有一些缺点,但是投入人力后也能够解决,比如石墨文档是很好的实践。最大的坑:

quill未提供一个好用的table,只有一个功能简陋的table,但是它的功能不满足需求,单元格连基本的换行都没有。业界有一个bettertable,介绍得比较好,但是坑一堆,绝对不能用。还有一个table-embled,这个思路是单元格里再放个quill编辑器,感觉有点蠢,slab用的是这个方案。目前石墨实现得不错,也是table-embled方案,不过它内部实现了一个轻量级的编辑器,也就是说单元格里用的并不是Quill。 

很难实现多层级嵌套的DOM结构,比如:

515ed62746123eb6729ef198eb0825da.png

Slate

这个编辑器也比较流行,比如早期的钉钉文档、语雀都基于它实现的,还有如流文档也是基于它实现的,效果不错,能实现的功能非常多,基本能满足复杂需求。不过是React的。

目前最大的风险是它仍然处于beta阶段,主要靠社区来维护。API也在不断变化。

我对Slate没有实际使用过,暂时不做过多评价,后面学习完它的设计原理后,单独写一篇文章。

时间关系,今天就写到这里吧,大家加油。

  • 19
    点赞
  • 20
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
wangEditor是一款基于JavaScript和CSS开发的Web富文本编辑器,它具有轻量级、简洁、易用的特点。相比于普通的文本编辑器,富文本编辑器可以输入超越文本的数据内容,包括上传图片、输入表情、字体大小字号调整、颜色设置、对齐方式等功能操作。[1] 在使用wangEditor富文本编辑器时,首先需要在代码中引入相关的文件。可以在editor.vue文件中添加以下代码: ```html <template> <div> <div ref="editor" style="text-align:left"></div> </div> </template> <script> import E from 'wangeditor' export default { name: 'MyEditor', data() { return { editorContent: '', editor: null } }, props: { value: { type: String, required: true } }, model: { prop: 'value' }, methods: { getContent: function () { alert(this.editorContent) }, _initEditor(that) { var editor = new E(this.$refs.editor) editor.config.zIndex = 100 editor.create() that.editor = editor } }, mounted() { this._initEditor(this) setTimeout(() => { this.editor.txt.html(this.value) }, 1000) } } </script> <style scoped> </style> ``` 然后,可以在需要使用富文本编辑器的地方注册组件,并创建编辑器。可以使用以下代码: ```html <!-- 首先给出一个div,并设id属性 --> <div id="div1"></div> <script type="text/javascript"> var E = window.wangEditor var editor = new E('#div1') // 创建编辑器 editor.create() </script> ``` 以上是使用wangEditor富文本编辑器的基本介绍和使用方法。[1][2][3]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值