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没有实际使用过,暂时不做过多评价,后面学习完它的设计原理后,单独写一篇文章。

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/616417.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

乡村智慧化升级:数字乡村打造农村生活新品质

目录 一、乡村智慧化升级的内涵与意义 二、乡村智慧化升级的具体实践 1、加强农村信息基础设施建设 2、推广智慧农业应用 3、提升乡村治理智慧化水平 4、丰富智慧乡村生活内容 三、数字乡村打造农村生活新品质的成果展现 1、农业生产效率与质量双提升 2、农民收入与消…

SPP论文笔记

这篇论文讨论了在深度卷积网络中引入空间金字塔池化(SPP)层的方法,以解决传统深度卷积网络需要固定图像尺寸的限制。以下是论文各部分的总结: 1. 引言 论文指出现有的深度卷积神经网络(CNN)需要固定大小的…

谈谈我的软考高级考证之路(系统架构设计师篇)

系统架构设计师备考资料请移步 2023年软考高级系统架构设计师视频教程,推荐下载!获取。 备考总体策略 • 总体策略:刷视频记笔记刷真题 • 备考时间:建议报完名之后,开始备考,大致2-3个月(基础…

C语言-详解内存函数

文章目录 1.memcpy使用和模拟实现1.1 memcpy函数的使用规则1.2 memcpy函数的使用1.2 模拟实现memcpy函数 2.memmove 函数的使用和模拟实现2.1 memmove 函数使用规则2.2 memmove函数的使用2.3 模拟实现memmove函数2.3.1 从后往前移2.3.2 从前往后移 2.4 算法实现2.4.1 从前往后移…

python爬虫--------Beautiful Soup 案列(二十一天)

🎈🎈作者主页: 喔的嘛呀🎈🎈 🎈🎈所属专栏:python爬虫学习🎈🎈 ✨✨谢谢大家捧场,祝屏幕前的小伙伴们每天都有好运相伴左右,一定要天天…

element-ui form表单自定义label的样式、内容

element-ui form表单自定义label的样式、内容 效果截图 代码 <el-form size"small" :inline"true" label-width"120px"><el-form-item prop"name"><div slot"label"><i style"color: red;"…

2024年认证杯数学建模挑战赛C题全解析

2024年认证杯C题的已经完成啦&#xff0c;包括参考论文&#xff0c;模型代码&#xff0c;分享给大家&#xff5e; 问题分析 对于这些问题&#xff0c;我们首先需要确定影响日光辐射降低效应的关键参数&#xff0c;例如海盐气溶胶的浓度、粒子大小、分布以及喷洒高度和范围。同…

【opencv】示例-opencv_version.cpp 输出OpenCV的版本和构建配置的示例

#include <opencv2/core/utility.hpp> // 引入OpenCV核心工具库 #include <iostream> // 引入标准输入输出流库// 定义一个包含命令行参数的字符串 static const std::string keys "{ b build | | print complete build info }" // 定义参数b&#xff…

elasticSearch从零整合springboot项目实操

type会被弃用 &#xff0c;就是说之后的elasticSearch中只会存在 索引&#xff08;indices&#xff09; 和 一行&#xff08;document&#xff09; 和字段&#xff08;fields&#xff09; elasticSearch 和solr的区别最大的就是 es对应的 是 json的格式 。 solr有xml和josn等…

全景剖析SSD SLC Cache缓存设计原理-2

四、SLC缓存对SSD的寿命是否有优化&#xff1f; 当使用QLC或TLC NAND闪存并将其切换到SLC模式进行写入时&#xff0c;会对闪存的寿命产生以下影响&#xff1a; 短期寿命提升&#xff1a; SLC模式下&#xff0c;每个存储单元仅存储一个比特数据&#xff0c;相对于QLC或TLC来说…

GAMS104 现代游戏引擎 2

渲染的难点可以分为一下三部分&#xff1a;如何计算入射光线、如何考虑材质以及如何实现全局光照。 渲染的难点之一在于阴影&#xff0c;或者说是光的可见性。如何做出合适的阴影效果远比想象中要难得多&#xff0c;在实践中往往需要通过大量的技巧才能实现符合人认知的阴影效…

软考 - 系统架构设计师 - 面向对象架构设计案例

问题1&#xff1a; 解决该题&#xff0c;用例和参与者要一起进行分析&#xff0c;首先看到用例 U1 和 U2 是 U3 的扩展&#xff0c;分析用例列表中的用例&#xff0c;可以分析出 U1 和 U2 是Underpaid transaction 和 Record lllegal use&#xff0c;顺序可以颠倒&#xff0c;…