一、Dreamwaver 真的老了吗？2026 年的网页编辑生态
如果你在 2005~2015 年间做过网站，Dreamwaver 几乎是绕不开的名字。它把"代码视图 + 设计视图"并排放好，让你既能像写 Word 一样拖拽出网页，又能随时切到 HTML 源码手改标签——那个年代，"所见即所得"（WYSIWYG）四个字母就是设计师的圣杯。
但 Adobe 在 2017 年宣布 Dreamwaver 转为"长期维护、不再大改"，2020 年后基本只剩小补丁。对今天的内容创作者、独立开发者、运营人来说，需求早就变了：
- 写公众号/博客，要的是像 Word 一样排版但产出干净结构化数据；
- 搭营销页，要的是像 Figma 一样拖拽组件、即时预览；
- 给客户做 CMS 后台，要的是像 Notion 一样块状可扩展、协作编辑；
- 只想给文章插个富文本框，要的是1~30KB 装进页面就跑。
今天 GitHub 上有 超过 100 个活跃维护的 WYSIWYG 项目，星标过万的就 8 个。我花了一周时间，从"编辑器框架 / 网页构建器 / 块状文档编辑器 / 极简内嵌"四个方向，筛出最值得关注的 14 个，按真实使用场景给你一份2026 年最新对比清单。
适合人群：独立开发者 / 内容运营 / 设计师 / SaaS 后端 / 任何想"不写代码做网页"的人。
二、14 个项目一张表速览
| # | 项目 | ⭐ Star | 许可证 | 类别 | 一句话定位 |
|---|---|---|---|---|---|
| 1 | Tiptap | 38.0k | MIT | 编辑器框架 | ProseMirror 之上的无头富文本，最流行 |
| 2 | Editor.js | 31.9k | Apache-2.0 | 块状文档 | 输出干净 JSON，可全平台复用 |
| 3 | Slate | 31.7k | MIT | 编辑器框架 | 完全可定制，React 生态首选 |
| 4 | GrapesJS | 26.1k | BSD-3 | 网页构建器 | 拖拽式 HTML 模板生成器，最像 Dreamwaver |
| 5 | Plate | 16.5k | MIT | 富文本+AI | Slate + shadcn/ui，AI 能力开箱即用 |
| 6 | Novel | 16.4k | Apache-2.0 | 块状文档 | Notion 风格 + GPT 自动补全 |
| 7 | TinyMCE | 16.3k | GPL-2.0+ | 富文本编辑器 | 老牌王者，350M 年下载量 |
| 8 | Pell | 12.1k | MIT | 极简编辑器 | 1.38kB 极小体积，零依赖 |
| 9 | Milkdown | 11.8k | MIT | Markdown WYSIWYG | Typora 灵感，双向 Markdown |
| 10 | CKEditor 5 | 10.5k | GPL/商业 | 富文本编辑器 | 功能最全的企业级方案 |
| 11 | BlockNote | 10.1k | MPL-2.0 | 块状文档 | Notion 风的快速落地版 |
| 12 | Webstudio | 8.8k | AGPL-3.0 | 网页构建器 | 开源 Webflow 替代 |
| 13 | Builder.io | 8.8k | MIT | 可视化平台 | Figma 转代码，多框架 |
| 14 | Craft.js | 8.7k | MIT | 拖拽编辑器 | React 拖拽页面编辑器框架 |
数据截至 2026-08-11 抓取。⭐ Star 数会随时间变化，以仓库实际为准。
三、按"使用场景"分组详解
下面分 4 大类 给你讲清楚每个项目适合干啥、不适合啥。
🟦 第一类：拖拽式网页构建器（最像 Dreamwaver 的那一类）
如果你的目标是"搭出一个完整 HTML 网页 / 邮件模板 / 落地页"，这一类最对口。它们把 HTML、CSS、组件、样式管理器、图层、资源库全部 UI 化，像 Figma 一样拖拽即可。
① GrapesJS ⭐ 26.1k（最像 Dreamwaver）
它是什么：免费开源的 Web Builder Framework，专门用来在 CMS 里"无代码搭出 HTML 模板"，支持网站、邮件、App 三类输出场景。
它能做什么：
- 拖拽 Block Manager：从侧边栏把按钮、表单、网格、轮播等组件拖到画布；
- Style Manager：可视化编辑 CSS，左边改属性右边实时变；
- Layer Manager / Asset Manager / Code Viewer：图层树、资源库、HTML 预览一应俱全；
- 27+ 官方插件：mjml 邮件、ckeditor 富文本、navbar / tabs / tooltip / countdown / firestore 等等开箱即用；
- 导出干净 HTML：跟 Dreamwaver 一样能"导出代码"，但导出物完全可二次开发；
- React 官方包装器
@grapesjs/react，Vue/Angular 走社区包。
适合谁：
- ✅ 想给自家 CMS 加可视化编辑器（电商模板编辑、邮件营销编辑）
- ✅ 想搭一个像 Dreamwaver 那样的"独立网页工具"
- ✅ SaaS 厂商要为客户做"自定义落地页"
- ❌ 不适合做实时协作（GrapesJS Studio 才支持）
一句话总结：Dreamwaver 停更十年后的最佳开源接棒者，26k Star 不是吹的。
② Webstudio ⭐ 8.8k
它是什么：明摆着说自己就是 Webflow 的开源替代。可视化构建器 + 可连接任何 Headless CMS + 支持所有 CSS 属性 + 任意部署（含自家云）。
它能做什么：
- 完整可视化 CSS 编辑（继承、变量、嵌套都支持）；
- 内置 radix-ui 设计系统，能直接连 headless CMS、Cloudflare Workers；
- 官方支持自托管（AGPL-3.0） 和 SaaS 商业版；
- 团队协作 + 跨职能设计/开发同步。
适合谁：
- ✅ 想找 Webflow 的开源替身
- ✅ 团队里有设计师 + 开发者，要可视化协作
- ⚠️ 许可要小心：核心 AGPL-3.0，意味着你如果改了源码并对外提供服务，必须开源你的改动；商业版规避这个问题。
一句话总结：开源 Webflow，但要算清楚 AGPL 的合规账。
③ Builder.io ⭐ 8.8k
它是什么：Visual Development Platform，拖拽可视化编辑 + Figma-to-code + SDK 嵌入。能直接在你现有的 React/Vue/Svelte/Next.js 项目里嵌入可视化编辑器。
它能做什么：
- 在现有代码库里直接"可视化拖拽新页面"——不用重写后端；
- Figma 设计稿 → 代码 一键转换；
- 同一份内容分发到 Next.js、Gatsby、Shopify、React Native、Web Components；
- 商业版还支持 A/B 测试 + 个性化投放。
适合谁：
- ✅ 已有前端项目，想给"营销/运营"开个可视化编辑权限
- ✅ 设计师 + 开发者协作流
- ⚠️ 核心免费，但 Figma 转换、A/B 测试等高级功能收费
一句话总结：给现有应用加可视化编辑入口的"插件式"方案，但偏商业化。
④ Craft.js ⭐ 8.7k
它是什么："可扩展拖放页面编辑器"的 React 框架。它本身没 UI，而是给你 hooks（useNode / useEditor），让你像设计普通 React 组件一样设计编辑器。
它能做什么：
- 通过
useNodehook 逐组件控制编辑方式（禁用、锁定、嵌套限制等）； <Canvas />实现容器内拖放；- 状态可序列化为 JSON 存到任何地方；
- 配
@craftjs/layers拿到一个类 Photoshop 图层面板。
适合谁：
- ✅ React 深度玩家，要高度自定义编辑器 UI（官方原话）
- ❌ 不适合需要"开箱即用页面编辑器"的人——它本质是脚手架
一句话总结：DIY 党最爱，但要写不少代码。
🟩 第二类：WYSIWYG 富文本编辑器（像 Word 一样编辑富文本内容）
如果你的目标是"让用户在网页里写一篇文章 / 一段评论 / 一个表单"，这一类就是答案。它们大多基于 contenteditable（浏览器原生可编辑区）+ 自定义数据模型。
⑤ Tiptap ⭐ 38.0k（无头框架王者）
它是什么：Headless、框架无关的富文本编辑器框架，基于成熟的 ProseMirror。38k Star 是这表里最高的。
它能做什么：
- 完全无头：不绑定 UI，把"工具栏长什么样"完全交给你；
- 扩展机制：100+ 官方扩展，从文本样式到拖拽块、AI、协同全覆盖；
- React / Vue / 原生 JS 都行；
- 协同后端 Hocuspocus + Yjs：实时多人编辑直接接；
- AI 能力：Content AI 包能直接接 OpenAI/Anthropic。
适合谁：
- ✅ 想自己造一个有"差异化 UI"的富文本编辑器
- ✅ SaaS 产品需要"富文本 + 协同 + AI"全套
- ❌ 不想写太多代码？（那去看 BlockNote）
许可：MIT（极宽松）。
一句话总结：GitHub 上最受欢迎的可扩展富文本引擎，做富文本不知道选谁就选 Tiptap。
⑥ Slate ⭐ 31.7k
它是什么：完全可定制的富文本编辑器框架，基于 React，类似 contenteditable 的可插拔实现。
它能做什么：
- 一等公民的插件系统：所有行为都是插件，包括光标、历史、嵌套；
- 无模式核心（Schema-less core）：不绑定你的数据结构；
- 嵌套文档模型：文档树形结构，可任意嵌套；
- 协作就绪：状态可同步给 Y.js / Automerge。
适合谁：
- ✅ 要完全控制编辑器内部行为的项目（比如 Notion 类、IDE 类）
- ✅ React 项目
- ❌ 只是"加一个能输入富文本的文本框"——它过重
许可：MIT。
一句话总结：自由度最高的富文本框架，但要写不少 glue code。
⑦ TinyMCE ⭐ 16.3k（老牌王者）
它是什么：自封的 "世界排名第一 JavaScript 富文本编辑库"。年下载量 3.5 亿+，被 Atlassian、Medium、Evernote 等大牌使用。
它能做什么：
- 三种编辑模式：经典 / 内联 / 无干扰；
- 50+ 官方插件，单行代码启用；
- 400+ APIs，29 种集成（含 React、Vue、Angular 官方包装）；
- UI 可高度定制，支持自定义扩展。
适合谁：
- ✅ 企业级项目，需要稳定 + 大量现成功能（表格、媒体、拼写检查等）
- ⚠️ GPL-2.0+ 协议：商用需注意，开源项目免费但闭源商用要么开源你的代码要么买商业许可；
- ❌ 想要"小而美"的项目——它 minified 体积比较大。
一句话总结：功能最全、最稳的传统富文本，但商用要算清许可证账。
⑧ CKEditor 5 ⭐ 10.5k（功能最全的富文本）
它是什么：与 TinyMCE 并称的另一座"老牌大山"。模块化 MVC 架构 + 自定义数据模型 + 虚拟 DOM。
它能做什么：
- 表格、列表、字体、Markdown 输入输出、源码编辑、图片视频上传全套；
- 可导出为 PDF、Word——这是它相对其他富文本的杀手锏；
- 协作编辑、评论、更改追踪（track changes）；
- 与 Angular / React / Vue 3 集成；
- 高度可访问性 + 多语言。
适合谁：
- ✅ 企业级 CMS、政府/金融项目，需要最全功能
- ✅ 需要"导出 PDF/Word"能力
- ⚠️ GPL-2.0+ 双许可——商用要付费
- ❌ 个人博客、小项目——太重
一句话总结：富文本界的"重型坦克"，功能最全但商用必付费。
⑨ Pell ⭐ 12.1k（极简编辑器）
它是什么："最简单、最小的网页所见即所得文本编辑器，零依赖"。基于 contenteditable 的 document.execCommand。
它能做什么：
- 粗体/斜体/标题/列表/代码/链接/图片……基础操作都有；
- 1.38kB（min+gzip），比 CKEditor 的 163kB 小了 100 倍；
- 浏览器支持到 IE9+。
适合谁：
- ✅ 评论框、留言板、轻量表单：只需要"加粗斜体加链接"那种；
- ✅ 不想引外部依赖的小页面
- ❌ 不需要表格、媒体、协同——它做不到。
许可：MIT。
一句话总结：当你想"加个能加粗的输入框"时，1.38kB 就够了。
🟨 第三类：块状 / Notion 风格编辑器（像 Word 但更现代）
如果说第二类像 Word，那这一类像 Notion + 飞书文档——每个内容都是一个块，可以拖拽、嵌套、斜杠菜单添加新块。
⑩ Editor.js ⭐ 31.9k
它是什么：块状编辑器，输出干净的 JSON。每个内容块由独立插件提供，UI 干净轻量。
它能做什么：
- 自带 18+ 块：标题、引用、图片、嵌套列表、清单、链接嵌入、YouTube/Twitter 嵌入、表格、代码块、警告块、附件等；
- 输出结构化 JSON，不是 HTML——这意味着你后端存储、搜索、转换、AI 处理都更友好；
- 多平台支持：Web、iOS、Android、AMP、Instant Articles、语音阅读器、AI Chatbot；
- 已完成统一工具栏、嵌套菜单；协同编辑进行中。
适合谁：
- ✅ 后端要存"结构化内容"而不是 HTML（CMS、博客、知识库）
- ✅ 多端复用同一份数据
- ❌ 只是想要"像 Word 的所见即所得"——它不像 Word，更像 Notion
许可：Apache-2.0。
一句话总结："结构化内容"场景的最佳块状编辑器，输出 JSON 是一绝。
⑪ BlockNote ⭐ 10.1k（Notion 风格快速落地）
它是什么：React 富文本编辑器，块状、Notion 风格、可扩展。底层基于 ProseMirror + Tiptap。
它能做什么：
- 拖放块、Tab/Shift+Tab 嵌套缩进、"/" 斜杠菜单、Format 菜单、动画、占位提示；
- 实时协作（基于 Yjs）；
- 主题用 Mantine，可定制；
- 提供 Notion-style 模板直接跑。
适合谁：
- ✅ 要在自家产品里嵌入一个 Notion 风的编辑器
- ✅ React 项目
- ⚠️ XL 包走 GPL-3.0，商业授权另外谈
许可：MPL-2.0（核心），XL 包 GPL-3.0。
一句话总结：最快做出 Notion 风编辑器的方式，但它底层还是 Tiptap。
⑫ Novel ⭐ 16.4k（Notion + AI）
它是什么：Notion 风格 WYSIWYG 编辑器 + AI 自动补全。基于 Tiptap + OpenAI。
它能做什么：
- 块状 Notion 体验 + 斜杠命令直接调用 GPT 帮你写；
- 跨框架支持：React / Svelte / Vue；
- VSCode 扩展（社区贡献）+ 一键 Vercel 部署；
- 项目演示页面非常漂亮，适合做 SaaS 模板。
适合谁：
- ✅ 想做"AI 写作助手"类产品
- ✅ 想拿现成的 Notion 风做 ToC 产品
- ❌ 不想依赖 OpenAI API
许可：Apache-2.0。
一句话总结：Notion 风 + GPT 自动补全的最快组合拳。
⑬ Plate ⭐ 16.5k（AI + shadcn/ui 富文本）
它是什么：集成 AI 与 shadcn/ui 的富文本编辑器，底层基于 Slate。
它能做什么：
- 三个起步模板：Notion-like / Playground / Minimal，按需取用；
- AI 能力 + MCP（Model Context Protocol）扩展；
- Monorepo 架构，12,000+ releases 频繁发布；
- 自带
.claude/.codex配置，方便 AI 编程代理理解项目。
适合谁：
- ✅ Next.js + shadcn/ui 生态用户
- ✅ 想给富文本加 AI 能力（自动续写、改写、翻译）
- ❌ 不用 React 或不想用 Slate
许可：MIT。
一句话总结：shadcn 党 + AI 党的最佳富文本伴侣。
⑭ Milkdown ⭐ 11.8k（Markdown WYSIWYG）
它是什么：插件驱动的所见即所得 Markdown 编辑器框架，灵感来自 Typora，基于 prosemirror + remark。
它能做什么：
- 双向 Markdown：左边写 Markdown 右边实时预览（像 Typora，但所见即所得）；
- 支持 GFM（GitHub Flavored Markdown）；
- 完全插件化，UI / 编辑器 / 主题都能换；
- pnpm monorepo，TypeScript 全栈。
适合谁：
- ✅ Markdown 重度用户（写技术博客、API 文档）
- ✅ 想做"类似 Typora 的所见即所得"
- ❌ 非 Markdown 用户——没必要绕一圈
许可：MIT。
一句话总结："Markdown 用户的最爱"——既能用 Markdown 写，又能像 Word 一样排版。
四、对比维度速查（选型表）
为了让你快速对号入座，下表把 14 个项目按"是不是网页构建器、像不像 Word、是不是块状、支持协同、AI 能力、协议宽松度"六个维度对比。
| 项目 | 网页构建器 | 像 Word | 块状/Notion | 协同编辑 | AI 能力 | 协议宽松 |
|---|---|---|---|---|---|---|
| GrapesJS | ✅✅ | ⭐ | ⭐ | ⚠️ | ⭐ | ✅ BSD-3 |
| Webstudio | ✅✅ | ⭐ | ⭐ | ✅ | ⭐ | ⚠️ AGPL-3.0 |
| Builder.io | ✅✅ | ⭐ | ⭐ | ✅ | ✅ | ✅ MIT |
| Craft.js | ✅ | ⭐ | ⭐ | ⚠️ | ⭐ | ✅ MIT |
| Tiptap | ⭐ | ✅✅ | ✅ | ✅✅ | ✅ | ✅ MIT |
| Slate | ⭐ | ✅ | ✅ | ✅ | ⭐ | ✅ MIT |
| TinyMCE | ⭐ | ✅✅ | ⭐ | ⚠️ | ⭐ | ⚠️ GPL-2.0+ |
| CKEditor 5 | ⭐ | ✅✅ | ⭐ | ✅ | ⭐ | ⚠️ GPL/商业 |
| Pell | ⭐ | ✅ | ⭐ | ⭐ | ⭐ | ✅ MIT |
| Editor.js | ⭐ | ✅ | ✅✅ | ⚠️ | ⭐ | ✅ Apache-2.0 |
| BlockNote | ⭐ | ✅ | ✅✅ | ✅ | ✅ | ⚠️ MPL/GPL |
| Novel | ⭐ | ✅ | ✅✅ | ⭐ | ✅✅ | ✅ Apache-2.0 |
| Plate | ⭐ | ✅ | ✅ | ✅ | ✅✅ | ✅ MIT |
| Milkdown | ⭐ | ✅ | ✅ | ⭐ | ⭐ | ✅ MIT |
✅✅=非常符合 ✅=符合 ⭐=一般/不主打 ⚠️=需付费/限制
五、按需求场景给推荐
下面是我替你做完的"决策树"——按你的真实需求对照抄作业：
🌐 场景 1：我想"像 Dreamwaver 一样拖拽做 HTML 网页"
- 首选：GrapesJS（26k Star，BSD-3，最像 Dreamwaver 原版）
- 想要 Webflow 体验：Webstudio（注意 AGPL）
- 已有前端项目、要嵌入可视化：Builder.io
- React 玩家、要 DIY：Craft.js
📝 场景 2：我想"像 Word 一样做文章/评论/表单"
- 想要最流行 + 自己定义 UI：Tiptap（38k Star，MIT）
- 想要 React + 完全自由：Slate
- 想要开箱即用 + 功能最全：CKEditor 5 / TinyMCE（注意许可证）
- 极简评论框：Pell（1.38kB）
🧱 场景 3：我想"像 Notion 一样做块状文档 / CMS"
- 输出 JSON、后端好处理：Editor.js
- React 快速落地 Notion 风：BlockNote
- + AI 自动补全：Novel / Plate
📚 场景 4：我是 Markdown 重度用户
- Milkdown：唯一"像 Typora 的所见即所得 Markdown"
- 或者把 Tiptap + Markdown 扩展凑一个
🏢 场景 5：我要做"企业级 CMS / 文档协作"
- Tiptap + Hocuspocus + Yjs（自建协同后端，开源免费）
- CKEditor 5（带协同包，付费）
- TinyMCE（带协同包，付费）
六、未来三年趋势：WYSIWYG 的下一个十年
看了这么多项目，我自己的几个判断：
- "Headless（无头）"会主导：Tiptap 38k Star 远超传统 WYSIWYG。开发者更喜欢"自己设计 UI + 接引擎"，而不是被绑死 UI。
- 协同是标配：Yjs（CRDT）+ Hocuspocus 几乎成为开源协同事实标准。
- AI 是新战场：Novel、Plate、Tiptap Content AI 都在押注"编辑器 + AI"组合。
- 协议宽松是硬指标：AGPL 项目会越来越小众——Webstudio 要做好被企业避开的准备。
- 块状编辑器吃掉部分富文本市场：Notion 风更符合"今天用户对文档的预期"。
七、我的最终推荐（个人向）
如果只让我推荐一个项目让你先试：
- 想做"网页"：GrapesJS——它真的是 Dreamwaver 之后最像 Dreamwaver 的开源项目。
- 想做"内容/文档"：Tiptap——38k Star 不会错，框架无关 + MIT + 协同 + AI 全到位。
如果你只能记一个 GitHub 仓库，现在就 Star ueberdosis/tiptap——它会是你下一个 SaaS 项目里最常用的依赖。
八、附：所有项目地址合集
| 项目 | 地址 |
|---|---|
| Tiptap | <https://github.com/ueberdosis/tiptap> |
| Editor.js | <https://github.com/codex-team/editor.js> |
| Slate | <https://github.com/ianstormtaylor/slate> |
| GrapesJS | <https://github.com/GrapesJS/grapesjs> |
| Plate | <https://github.com/udecode/plate> |
| Novel | <https://github.com/steven-tey/novel> |
| TinyMCE | <https://github.com/tinymce/tinymce> |
| Pell | <https://github.com/jaredreich/pell> |
| Milkdown | <https://github.com/milkdown/milkdown> |
| CKEditor 5 | <https://github.com/ckeditor/ckeditor5> |
| BlockNote | <https://github.com/TypeCellOS/BlockNote> |
| Webstudio | <https://github.com/webstudio-is/webstudio> |
| Builder.io | <https://github.com/BuilderIO/builder> |
| Craft.js | <https://github.com/prevwong/craft.js> |
许可说明：本调研数据来自 GitHub 仓库 README 抓取（截至 2026-08-11）。⭐ Star 数会变化，以仓库实际为准；许可证细节请以 LICENSE 文件原文为准。