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.mzph.cn/news/814063.shtml

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

相关文章

LeetCode最长有效括号问题解

给定一个仅包含字符的字符串(’ 和 ‘)’,返回最长有效的长度(出色地-形成) 括号子弦。 示例1: 输入:s “(()” 输出:2 说明:最长的有效括号子字符串是 “()” 。 示例2: 输入:s “)()())…

在Linux上利用mingw-w64生成exe文件

一、概要 1、elf与exe 在Linux上用gcc直接编译出来的可执行文件是elf格式的,在Windows上是不能运行的 Windows上可执行文件的格式是exe 利用mingw-w64可以在Linux上生成exe格式的可执行文件,将该exe文件拷贝到Windows上就可以运行 2、程序要留给用户…

体验Humane AI:我与可穿戴AI别针的生活

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗?订阅我们的简报,深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同,从行业内部的深度分析和实用指南中受益。不要错过这个机会,成为AI领…

如何使用 ArcGIS Pro 制作热力图

热力图是一种用颜色表示数据密度的地图,通常用来显示空间分布数据的热度或密度,我们可以通过 ArcGIS Pro 来制作热力图,这里为大家介绍一下制作的方法,希望能对你有所帮助。 数据来源 教程所使用的数据是从水经微图中下载的POI数…

JVM复习

冯诺依曼模型与计算机处理数据过程相关联: 冯诺依曼模型: 输入/输出设备存储器输出设备运算器控制器处理过程: 提取阶段:输入设备传入原始数据,存储到存储器解码阶段:由CPU的指令集架构ISA将数值解…

分布式技术--------------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.…

搭建基于Hexo的个人博客,以及git相关命令

全文写完之后的总结 测试命令 hexo clean hexo g hexo s 上传到服务器命令 hexo clean hexo g hexo d 上传到服务器(如果上一个命令用不了),也要先hexo clean,hexo g git init git add . git commit -m "first commit" git p…

部署HDFS集群(完全分布式模式、hadoop用户控制集群、hadoop-3.3.4+安装包)

目录 前置 一、上传&解压 (一 )上传 (二)解压 二、修改配置文件 (一)配置workers文件 (二)配置hadoop-env.sh文件 (三)配置core-site.xml文件 &…

Fuel tank position

Fuel tank position 汽车油箱位置在哪里,加油的时候就不会听错方向

uni-app的页面中使用uni-map-common的地址解析(地址转坐标)功能,一直报请求云函数出错

想在uni-app的页面中使用uni-map-common的地址解析(地址转坐标)功能,怎么一直报请求云函数出错。 不看控制台啊,弄错了控制台,就说怎么一直没有打印出消息。 所以开始换高德地图的,昨天申请了两个 一开始用的第二个web…

OpenAI CEO山姆·奥特曼推广新AI企业服务,直面微软竞争|TodayAI

近期,OpenAI的首席执行官山姆奥特曼在全球多地接待了来自《财富》500强公司的数百名高管,展示了公司最新的人工智能服务。在旧金山、纽约和伦敦的会议上,奥特曼及其团队向企业界领袖展示了OpenAI的企业级产品,并进行了与微软产品的…

前端入门:极简登录网页的制作(未使用JavaScript制作互动逻辑)

必备工具:vscode Visual Studio Code - Code Editing. Redefined 目录 前言 准备 HTML源文件的编写(构建) head部分 body部分 网页背景设置 网页主体构建 CSS源文件的编写(设计) 结果展示 前言 博主稍稍自…

如何保证消息不丢失?——使用rabbitmq的死信队列!

如何保证消息不丢失?——使用rabbitmq的死信队列! 1、什么是死信 在 RabbitMQ 中充当主角的就是消息,在不同场景下,消息会有不同地表现。 死信就是消息在特定场景下的一种表现形式,这些场景包括: 消息被拒绝访问&am…

IDEA中sql语句智能提示设置

选中一句sql语句,点击鼠标右键 指定数据库

【MATLAB源码-第47期】基于matlab的GMSK调制解调仿真,输出误码率曲线,采用相干解调。

操作环境: MATLAB 2022a 1、算法描述 GMSK(高斯最小移相键控)是数字调制技术的一种。下面是关于GMSK调制解调、应用场景以及其优缺点的详细描述: 1. 调制解调: - 调制:GMSK是一种连续相位调制技术&a…

世界需要和平--中介者模式

1.1 世界需要和平 "你想呀,国与国之间的关系,就类似于不同的对象与对象之间的关系,这就要求对象之间需要知道其他所有对象,尽管将一个系统分割成许多对象通常可以增加其可复用性,但是对象间相互连接的激增又会降低…

迈威通信MaxGate800系列工业边缘计算网关,算力硬核中枢的巅峰之作

随着人们对工业物联网领域的深入了解与实践,越来越多的企业开始寻求将计算业务从云端迁移至网络边缘处理与执行。然而,在实际应用中,开发者面临着诸多挑战。为了解决这些问题,迈威通信MaxGate800系列工业智能网关应运而生。 MaxG…

2024年公共管理、健康与大数据国际学术会议(ICPAHBD 2024)

2024 International Conference on Public Administration, Health and Big Data (ICPAHBD 2024) ●会议简介 2024年公共管理、健康与大数据国际学术会议(ICPAHBD 2024)即将在宁波盛大召开。本次会议旨在汇聚全球公共管理、健康与大数据领域的专家学者…

【LAMMPS学习】八、基础知识(2.2)类型标签

8. 基础知识 此部分描述了如何使用 LAMMPS 为用户和开发人员执行各种任务。术语表页面还列出了 MD 术语,以及相应 LAMMPS 手册页的链接。 LAMMPS 源代码分发的 examples 目录中包含的示例输入脚本以及示例脚本页面上突出显示的示例输入脚本还展示了如何设置和运行各…

基于ssm的校园短期闲置资源置换平台(java项目+文档+源码)

风定落花生,歌声逐流水,大家好我是风歌,混迹在java圈的辛苦码农。今天要和大家聊的是一款基于ssm的校园短期闲置资源置换平台。项目源码以及部署相关请联系风歌,文末附上联系信息 。 项目简介: 校园短期闲置资源置换…