scorpio-99/payload-better-editor

# payload-better-editor [](https://www.npmjs.com/package/payload-better-editor) [](https://www.npmjs.com/package/payload-better-editor) [](https://github.com/scorzo-99/payload-better-editor) [Payload CMS](https://payloadcms.com) 的 Block 编辑器插件，为编辑视图添加了并排的实时预览 iframe 和侧边栏。 ## 跳过巨大的表单 - 选择一个 Block，仅编辑该 Block 从任何文档的编辑视图中打开编辑器。预览 iframe 会加载您的前端实时页面；点击某个 Block 会将其选中，并在侧边栏中打开其实际的 Payload 字段 - 无需重复 schema，也无需自定义组件。  ## 悬浮的 iframe 内工具栏 将鼠标悬停在预览中的任何 Block 上，会显示其悬浮操作工具栏 - 上移、下移、复制、在下方添加、删除。所有操作都通过 Payload 的表单状态进行，并由插件的撤销/重做历史记录追踪。  ## 视口与布局控制 在桌面、平板、移动端和响应式（可拖动调整大小）之间切换。全屏按钮是独立的 - 它将整个编辑器（预览 + 侧边栏）置于全屏状态，同时 iframe 保持您选择的视口大小。侧边栏本身可以拖动调整为任意宽度，或者完全折叠，让预览获得完整的画布空间。  ## 更多功能 - **Page、Blocks、Settings 标签页** 根据您文档的标签页结构自动生成 - **`BetterEditorSettings` 全局配置**，管理员可以实时更改侧边栏位置、悬停颜色、平板/移动端断点以及悬浮工具栏的位置 - 无需重新部署 - **侧边栏中也包含 Block 操作** - 相同的移动/复制/在下方添加/删除操作会镜像在侧边栏的 Blocks 标签页中，以便高级用户无需使用 iframe 工具栏 - **撤销和重做**，使用 `Cmd/Ctrl+Z` 和 `Cmd/Ctrl+Shift+Z` - 基于快照，涵盖每一次 Block 变动 - **交互模式** 切换，允许点击传递到预览中的表单、手风琴和链接 - **加载骨架屏** 显示在 iframe 中，并带有错误边界，因此单个不良 Block 不会导致管理面板崩溃 - **点击编辑** 支持任意嵌套深度 - 点击深层嵌套的 Block 会向上追溯到其最内层的包装器 - **真正的 Payload 字段** 通过 `RenderFields` 显示在侧边栏中，因此自定义字段组件、验证和访问控制都能正常运行 ## 安装 ``` pnpm add payload-better-editor ``` 有关设置、插件选项、运行时设置和架构说明，请参阅 [DEVELOPERS.md](./DEVELOPERS.md)。 ## 环境要求 - Payload `>=3.81.0` - React 19 ## 贡献者

标签：DNS解析, GNU通用公共许可证, iframe, Live Preview, Node.js, npm包, Payload CMS, React, Syscalls, UI组件, WYSIWYG, 全屏模式, 内容管理系统, 前端预览, 可视化编辑, 响应式设计, 块编辑器, 实时预览, 开源项目, 所见即所得, 拖拽调整, 插件, 撤销重做, 无头CMS, 用户体验, 网站搭建, 自动化攻击