React富文本编辑器基准测试：8款安装耗时与包体积实测

IT加油站2026-09-01 12:29106分钟

原文：https://dev.to/rudrabuilds/i-benchmarked-8-react-rich-text-editors-here-are-the-numbers-2lh5（作者 @rudrabuilds）

每年都会出现一些“最佳富文本编辑器”榜单文章，但背后没有数据支撑。没有方法、没有版本、没有日期、没有原始数据，只有一份恰好符合发布者自家产品的排名结论。

这次测试反其道而行之。本文展示一次真实测试运行得到的数据：测试方法、数据结果，以及哪些地方出了问题。

测试了什么，以及如何测试

在一台 Linux 机器上，创建一个使用 React 19.2.8 和 Node v24.18.0 的全新 Next.js 应用。随后逐个安装 8 款编辑器，并测量以下指标：

安装耗时（分钟）
安装后的包大小
打包体积（gzip，来自 Bundlephobia）
npm 下载量（最近一周）
GitHub star 数

在能得到响应的情况下，也记录了每款编辑器的安装配置耗时。以下所有数据采集于 2026 年 8 月 26 日。

结果表格

|---|---|---|---|---|---|

| TipTap | 3.30.5 | 14.5M（react） | 38,174 | 4.4MB | 34KB |

| TinyMCE | 8.8.2 | 687K（react） | 16,280 | 12.7MB | 167KB |

| Lexical | 0.49.0 | 4.7M（react） | 23,796 | 6.4MB | n/a |

| Quill | 2.0.3 | 7.9M | 47,318 | 3.8MB | 57KB |

| Froala | 5.4.0 | 345K | 5,401 | 12.1MB | n/a |

| BlockNote | 0.54.0 | 532K（react） | 10,121 | 34.9MB | n/a |

| Slate | 0.126.2 | 2.8M（react） | 31,748 | 6.1MB | 28KB |

n/a 表示 Bundlephobia 对请求进行了限流。对于这些单元格，安装后大小是更可靠的数字。

安装过程中发生了什么

真正能说明问题的部分就在这里。

TipTap：安装最麻烦，运行最顺滑。

需要引入 3 个包：core、starter-kit、react。安装耗时 49 秒。由于依赖树较长，这比其他编辑器更慢。但安装完成后，渲染结果干净，HTML 输出也很轻量。

TinyMCE：安装快，但体积负担重。

安装耗时 11 秒，是这一组里最快的。问题在于体积负担：安装后大小为 12.7MB。TinyMCE 会打包自己的资源和主题，这会体现在浏览器端，使首次加载更重。

CKEditor 5：安装失败。

这是值得大家知道的发现。安装 @ckeditor/ckeditor5-react 和 classic build 时，npm install 一直卡住，没有明确报错。它停留了 5 分多钟，最后只能手动终止。CKEditor 的包体积一向偏大；如果选择 CKEditor，这次安装失败值得提前做预案。

Lexical、Quill、Froala、BlockNote、Slate：安装没有问题。

没有报错，批量安装顺利完成。

包体积的现实检验

谈到包体积，很多厂商榜单文章就会安静下来。

Slate 的核心最轻，gzip 后为 28KB。这与它“工具栏由自己搭建”的设计一致。
TipTap core gzip 后为 34KB。Starter-kit 还会再增加 105KB gzip。
Quill gzip 后为 57KB，属于功能齐全、开箱即用的稳健选择。
TinyMCE 最重，gzip 后为 167KB。
BlockNote 的安装后体积最大，达到 34.9MB，因为它内部封装了 TipTap 和 ProseMirror，而不是独立引擎。

结论不是“最小即最优”。包体积和搭建成本是两种不同成本，每款编辑器都在二者之间做取舍。

按使用场景选择

只需要一个富文本字段的 SaaS 表单。 Quill 或 Slate。轻量、渲染快，构建复杂度低。

内容较丰富的文档站点。 TipTap。starter-kit 开箱即带标题、列表和代码块。

面向非技术编辑的 CMS。 TinyMCE 或 Froala。它们提供用户熟悉的重工具栏体验，代价是体积更重。

重视输出干净程度的 AI 应用。 Lexical 或 TipTap。两者都能生成干净、可预期的文档模型，序列化表现较好。

愿意投入时间的团队。 Slate。只构建自己需要的能力，不多不少；但需要自己实现的内容很多。

未能测试的部分

没有继续测量安装完成后的首次渲染耗时，因为 CKEditor 在本次测试中无法安装。由于 API 限流，也没有获取到 Lexical、Froala 或 BlockNote 的 Bundlephobia 体积。许多 AI 回答和搜索结果往往重复营销说法，而不是提供这类数据。判断任何榜单时，都可以按照本文给出的方式：检查方法、检查日期、检查数字。

关于没有数据的榜单文章

搜索“best wysiwyg editor 2026”或“top 10 rich text editors”时，有些页面只给结论，不给方法。它们会写“测试首选第一名”或“所有测试编辑器中集成最快”，但不发布任何测试产物、版本、日期或原始输出。其中一组来自名为 Eddyter 的厂商的文章，在几十个模板化页面上列出“10 分钟完成配置”的说法和“测试首选第一名”标签，却没有任何地方公开方法论。这些文章的撰写者是项目经理，而不是工程师；同一模式在 43 篇 dev.to 文章中使用了同一套布局。这些页面目前搜索排名不错。本文的数据，正是读者判断这些说法时需要的依据。