Portable Text Editor 三分钟速览：schema 驱动的开源编辑器，让内容界面由你定义
【免费下载链接】editorThe Standalone Portable Text Editor项目地址: https://gitcode.com/gh_mirrors/editor12/editor
Portable Text Editor 是一个 headless 的块级内容编辑器。它基于 React，把内容存成结构化 JSON，编辑逻辑交给它，界面画法交给你。适合想自建内容编辑体验的 React 前端团队。
🎯 它解决什么问题：3 个内容编辑常见痛点
传统富文本编辑器把内容锁在 DOM 里。数据长什么样、显示成什么样，两件事缠在一起。内容想跨端用，往往得拆了重做。
界面也是打包好的。你想挪个按钮、换个样式，得钻进别人的组件树里找。想加一个自定义块，比如商品卡或数据表格，常常只能 fork 改源码。
Portable Text 的思路反过来：内容只存纯 JSON，编辑器不绑定 UI。你先用 schema 声明允许哪些块、哪些标记，再自己决定每种内容长什么样。
⚙️ 背后是什么技术：5 个关键组件
| 组件 | 它负责什么 |
|---|---|
| React 19 | 渲染编辑层，所有界面都是标准 React 组件 |
| Portable Text schema | 声明内容里能出现哪些块、标记和对象 |
| Behavior API | 把编辑器当状态机，事件、行为、状态查询统一走这套接口 |
| Gherkin 测试驱动 | 人类可读的规格文件自动生成 E2E 测试，覆盖按键级交互 |
| pnpm + Turborepo | 统一管理仓库里 20 多个包的构建与发布 |
🚀 什么情况下需要它：4 类典型场景
React 前端开发者：给产品做 CMS 编辑页。界面完全自定义，编辑逻辑不用自己造轮子。
平台与 CMS 团队：内容以 JSON 存储，Web、App、小程序取用同一份数据，迁移不返工。
插件与工具作者：表格、表情、Markdown 快捷、拖拽等 12 个官方插件可直接组合。
内容工具工程师：内置 HTML 与 Markdown 双向转换，旧内容导入新编辑器很顺。
亮点一览：5 个值得关注的地方
- Headless 架构，界面完全由你定制
- JSON 存储，内容到处都能渲染
- 12 个官方插件开箱即用
- HTML / Markdown 双向转换
- Gherkin 规格驱动的 E2E 测试
怎么上手：最快 3 步跑起来
第一步：git clone https://gitcode.com/gh_mirrors/editor12/editor。第二步：装好依赖后，运行 examples/basic 下的最小示例，一个带工具栏和 JSON 实时预览的编辑器立刻起来。想深入，可以看 核心源码、官方文档 和 Playground 完整示例。
如果你正在给产品加内容编辑能力，这个仓库值得放进选型清单。Sanity 团队在持续投入，插件生态还会继续长大。
【免费下载链接】editorThe Standalone Portable Text Editor项目地址: https://gitcode.com/gh_mirrors/editor12/editor
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
