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

news2025/6/8 11:13:56

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.coloradmin.cn/o/1592642.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

第二证券策略:股指预计维持震荡格局 关注汽车、工程机械等板块

第二证券指出,指数自今年2月份阶段低点反弹以来,3月份持续高位整理。进入4月份之后面对年报和一季报的双重财报发表期,预计指数短期保持高位整理概率比较大。前期缺乏成绩支撑的概念股或有回落的危险,主张重视成绩稳定、估值低、分…

Redis队列与Stream

Redis队列与Stream、Redis 6多线程详解 Redis队列与StreamStream总述常用操作命令生产端消费端单消费者消费组消息消费 Redis队列几种实现的总结基于List的 LPUSHBRPOP 的实现基于Sorted-Set的实现PUB/SUB,订阅/发布模式基于Stream类型的实现与Java的集成消息队列问…

Tuxera Ntfs for mac 2023中文解锁版安装、密钥下载与激活教程 Tuxera激活码 tuxera破解

Tuxera Ntfs for mac2023是Mac中专用于读写外置存储的工具,具有强大的磁盘管理和修复功能,它在Mac上完全读写NTFS格式硬盘,快捷的访问、编辑、存储和传输文件。能够在 Mac 上读写 Windows NTFS 文件系统。Tuxera NTFS 实现在Mac OS X系统读写…

根据ELK官网指引部署ELK- ECK-Elastic-​ Kibana​-Learn-ELK-(一)

**Attention: 1、You need open the ELK official website and step by step to deploy . 2、If you copy my command ,you must check them if it not match your environment . 一、official website Elastic documentation | Elastic Check there. 二、 ECK简介…

napi系列学习高阶篇——通过IDE集成C/C++三方库并开发napi接口

简介 应用在调用系统固件集成的C/C三方库时,可能会由于系统固件集成端与IDE的NDK中libc版本不一致导致调用失败,而且系统固件集成的C/C三方库对于应用的调式也很不友好,需要多方编译调试,很不方便。因此本文将通过在IDE上适配ope…

文件IO/标准IO

1.标准I/O 标准: 任何操作系统皆可使用;使用范围很广 系统调用和库函数 系统调用:操作系统给我们提供的接口 man 2 printf 可以调用内核中的接口 直接驱动显卡运行 printf实际是库函数中的函数,然后调用系…

目标检测笔记

目标检测笔记 one-stage和two-stage目标检测算法Two-Stage 目标检测算法One-Stage 目标检测算法既然Faster R-CNN使得候选区域生成和目标检测可以在同一个网络中端到端训练,为什么它还是属于Two-stage算法? 目标检测模型,训练中的正负样本是什…

分布式技术--------------ELK大规模日志实时收集分析系统

目录 一、ELK日志分析系统 1.1ELK介绍 1.2ELK各组件介绍 1.2.1ElasticSearch 1.2.2Kiabana 1.2.3Logstash 1.2.4可以添加的其它组件 1.2.4.1Filebeat filebeat 结合logstash 带来好处 1.2.4.2缓存/消息队列(redis、kafka、RabbitMQ等) 1.2.4.…

AI PC元年,华为的一张航海图、一艘渡轮和一张船票

今天,从学术研究者到产业投资者,无不认为大模型掀起了一场人工智能的完美风暴。 所谓“完美风暴”,指的是一项新技术的各个要素,以新的方式互相影响、彼此加强,组合在一起形成了摧枯拉朽般的力量。 而我们每个人&#…

Singleton单例设计模式详解

目录 模式定义应用场景实现方式1.懒汉模式:2.饿汉模式:3.静态内部类反射如何防止反射攻击破坏? 枚举类型序列化 部分源码中的应用定位Spring & JDKTomcat反序列化指定数据源 模式定义 保证一个类只有一个实例,并且提供一个全…

jmeter使用之生成html测试报告

测试的最终结果是需要给出一份报告,那么在用jmeter测试时怎么生成一份报告呢,以下针对jmeter如何生成html报告进行简单介绍 一、首先把测试脚本写好二、利用命令生成html报告 命令:jmeter -n -t 【Jmx脚本位置】-l 【结果文件result.jtl存放…

DBSCAN简介

1. 简介 常用聚类方法有: 1. 层次的方法(hierarchical method); 2. 划分方法(partitioning method); 3. 基于密度的方法(density-based method); 4. 基于网格的方法(grid-based method); 5. 基于模型的方法(model-base…

[MAUI]集成富文本编辑器Editor.js至.NET MAUI Blazor项目

文章目录 获取资源从源码构建从CDN获取获取扩展插件 创建项目创建控件创建Blazor组件初始化保存销毁编写渲染逻辑 实现只读/编辑功能切换模式获取只读模式状态响应切换事件 实现明/暗主题切换项目地址 Editor.js 是一个基于 Web 的所见即所得富文本编辑器,它由CodeX…

【opencv】示例-npr_demo.cpp 非真实感渲染:边缘保留平滑、细节增强、铅笔素描/彩色铅笔绘图和风格化处理...

Edge Preserve Smoothing- Using Normalized convolution Filter Edge Preserve Smoothing-Using Recursive Filter Detail Enhancement Pencil sketch/Color Pencil Drawing Stylization /* * npr_demo.cpp * * 作者: * Siddharth Kherada <siddharthkherada27[at]gmail[do…

最优算法100例之46-单链表逆置-头插法

专栏主页:计算机专业基础知识总结(适用于期末复习考研刷题求职面试)系列文章https://blog.csdn.net/seeker1994/category_12585732.html 题目描述 单链表逆置-头插法 题解报告 1)带头结点 带头结点的反转链表,头结点一直不动,后移head->next。不带头结点的反转,后移…

【vue】defineEmits 传值 子传父

先行知识 【vue】导入组件【vue】defineProps 传数据 父传子 传值流程 App.vue <template><Header getWeb"emitsGetWeb" userAdd"emitsUserAdd"/><hr /><p>web.name: {{ web.name }}</p><p>web.url: {{ web.url }}&…

HarmonyOS实战开发-横竖屏切换

介绍 本实例展示如何使用媒体查询&#xff0c;通过ohos.mediaquery 接口完成在不同设备上显示不同的界面效果。 效果预览 使用说明 1.在竖屏设备上&#xff0c;首页展示新闻列表&#xff0c;点击新闻进入详情界面。 2.在横屏设备上&#xff0c;首页左侧展示新闻列表&#x…

MATLAB 自定义实现点云法向量和曲率计算(详细解读)(64)

MATLAB 自定义实现点云法向量和曲率计算(详细解读)(64) 一、算法介绍二、算法步骤三、算法实现1.代码 (完整,注释清晰,可直接用)2.结果一、算法介绍 首先说明: ------这里代码手动实现,不调用matlab提供的法向量计算接口,更有助于大家了解法向量和曲率的计算方法,…

【数据结构】复习题(二)

Hello&#xff01;大家好&#xff0c;这一篇数据结构复习题是我上个学期复习的时候写的&#xff08;刚刚在草稿箱发现了&#xff01;&#xff09;有一些题目过程都是配了图片的&#xff0c;希望对正在复习数据结构的宝宝们有帮助哦&#xff01;(还有一个数据结构复习题(一)可以…

从零开始写一个RTSP服务器(一)RTSP协议讲解

目录 前言一、什么是RTSP协议&#xff1f;二、RTSP协议详解2.1 RTSP数据格式2.2 RTSP请求的常用方法2.3 RTSP交互过程2.4 sdp格式 三、RTP协议3.1 RTP包格式3.2 RTP OVER TCP 四、RTCP 前言 为什么要写这个系列&#xff1f; 因为我自己在学习rtsp协议想自己从零写一个rtsp服务…