Portable Text Editor：React 块内容编辑器，从结构化 JSON 到可用编辑器的实践指南

Portable Text EditorReact 块内容编辑器从结构化 JSON 到可用编辑器的实践指南【免费下载链接】editorThe Standalone Portable Text Editor项目地址: https://gitcode.com/gh_mirrors/editor12/editorPortable Text Editor 是一款基于 Portable Text 规范的 headless 块内容编辑器面向需要以 JSON 存储结构化内容的团队。它负责编辑逻辑界面由你搭建如果你还在用 HTML 字符串或 Markdown 管理内容值得试一下。为什么 HTML 与 Markdown 难以支撑内容编辑多数系统把富文本存成 HTML 字符串或 Markdown。HTML 在移动端、PDF 等场景渲染前都要先解析而解析器在畸形标签前很脆弱Markdown 缺少结构化数据一个链接只有文本加 URL无法携带更多字段。Portable Text 的做法是把内容存成 JSON 块数组每个块带_type和自身数据文本段、图片、代码块与自定义块如行动号召排在同一数组里。同一份数据可以查询、转换也能渲染成不同格式。核心能力拆解用 Schema 声明支持哪些内容类型编辑器由 schema 驱动。通过defineSchema声明你需要的 decorators、styles、annotations、lists、inline objects 与 block objectsschema 包提供完整的类型安全。编辑器只渲染你声明过的内容类型不存在就不会出现。搭建会发送编辑事件的工具栏工具栏以 React hooks 提供切换样式、加粗等常见操作可通过useEditor向编辑器发送事件完成也可以不用 hooks直接发送事件驱动编辑器行为可预期。用插件补齐表情选择、表格与拖拽官方插件覆盖表情选择器、typeahead 选择器提及、斜杠命令、表格真实的 Portable Text 块支持单元格级选择、Markdown 快捷输入、排版自动转换、链接粘贴、单行模式与字符对装饰。按需求启用不用整体引入。在 HTML 与 Markdown 之间双向转换仓库内置 HTML 转 Portable Text 与 Portable Text 转 Markdown 再转回的两个包老内容迁移和稿件导出都有对应入口。工作方式把编辑器当状态机Behavior API 把编辑器当状态机处理事件驱动变更行为用声明式挂接状态用纯函数派生变更可订阅。由于是 headless没有现成 UI 束缚每个块类型的渲染由你提供的注册负责。选择、撤销、分块、列表、粘贴等终端行为都有从可读 Gherkin 规格生成的端到端测试兜底回归有基准。适用人群与典型场景人群场景收益前端工程师自建富文本编辑界面编辑器管状态与交互你只写渲染与工具栏内容平台团队存储与查询结构化内容链接和块都是 JSON 字段可直接查询CMS 集成者对接既有文档系统sdk-value 插件连接文档sanity-bridge 转换 schema迁移老内容者导入 HTML 或 Markdown双向转换包处理格式迁移如何开始使用克隆仓库git clone https://gitcode.com/gh_mirrors/editor12/editor执行pnpm install后pnpm build。pnpm dev:playground可在本地启动完整示例Vitehttp://localhost:5173/工具栏、插件与输出 JSON 同屏可见pnpm dev:docs启动文档站pnpm dev:example-basic启动最小示例。无需后端与环境配置。注意事项编辑器要求 React 19.2.8 及以上版本。headless 不是缺陷它不提供默认 UI渲染注册与工具栏需要自己写。本仓库只含编辑器及配套工具渲染器portabletext/react、portabletext/to-html 等在独立仓库只展示不编辑时找渲染包即可。先跑一遍 playground 感受 schema 驱动的编辑方式再对照最小示例判断它是否匹配你的内容模型这两步足够做出决策。【免费下载链接】editorThe Standalone Portable Text Editor项目地址: https://gitcode.com/gh_mirrors/editor12/editor创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考