按分类浏览


GrapesJS 存储

GrapesJS 存储插件把编辑器的保存与加载机制连接到外部后端。这些插件让你不再只依赖 localStorage,而是把设计持久化到 REST API、WebSocket、数据库或云服务。浏览免费与付费的 GrapesJS 存储集成——每个条目都包含 API 文档以及针对不同 GrapesJS 版本的兼容性说明。

Loading...Loading...Loading...Loading...Loading...Loading...Loading...Loading...Loading...Loading...Loading...Loading...Loading...Loading...Loading...Loading...Loading...Loading...Loading...Loading...Loading...Loading...Loading...Loading...Loading...Loading...Loading...Loading...Loading...Loading...

关于 GrapesJS 存储

GrapesJS 自带存储系统,可自动保存与加载编辑器内容,但默认只写入浏览器的 localStorage——这意味着设计被绑定在单一设备与浏览器会话上。GJS.Market 上的 GrapesJS 存储插件用连接后端的持久化层替换或扩展它。REST API 存储插件最为常见:它们实现 GrapesJS 的 StorageManager 接口,保存时把编辑器内容以 JSON 形式 POST 到你的服务端接口,加载时再 GET 回已存储的 JSON。更进阶的插件还加入多人编辑的冲突解决、带历史侧栏的版本管理,以及草稿与发布流程。云原生存储插件可直接对接 Firebase Firestore、Supabase 或 PocketBase,无需自建 API 层——你提供凭据,插件负责全部读写操作。GJS.Market 上所有存储插件都会说明所需的服务端响应格式,并附带 Node.js、PHP 与 Python 的后端实现示例。

GrapesJS 存储 — 常见问题

GrapesJS 是如何保存编辑器内容的?
StorageManager 会把项目——组件、样式、页面与资源——序列化为一个 JSON 对象,交给当前启用的存储。默认存储是浏览器的 localStorage,因此内容从不离开本机。自动保存默认开启,在累计若干次改动后触发,可通过 stepsBeforeSave 控制。
如何把 GrapesJS 内容保存到自己的 API?
把 storageManager.type 设为 remote,并配置 load 与 store 端点。此后 GrapesJS 会在保存时 POST 项目 JSON,加载时 GET 回来;请求头与凭据写在同一个选项块中。若需求超出普通 REST,可用 Storage.add 注册自定义存储,自行实现 load 与 store。
项目 JSON 和导出的 HTML 有什么区别?
项目 JSON 是可编辑的源:它携带组件模型,重新载入即可恢复成完全可编辑的页面。getHtml 与 getCss 产出的是发布用的成品,无法可靠地还原回组件。两者都要保存——JSON 用于编辑,HTML/CSS 用于对外服务——切勿把导出结果当作唯一可信来源。
可以关闭 GrapesJS 的自动保存吗?
可以。把 storageManager.autosave 设为 false,改由你自己通过 editor.store() 触发保存,通常挂在「保存」按钮或发布命令上。当保存代价较高或需要先做校验时,这是正确的做法。你也可以调大 stepsBeforeSave,保留自动保存但降低触发频率。
GrapesJS 支持版本管理或多人协作编辑吗?
核心不支持——它每个项目只保存一份当前状态,后写入者覆盖先写入者。本分类的插件补充了带恢复侧栏的版本历史、草稿与发布流程,以及并发编辑的冲突解决。如果会有多人编辑同一页面,请选择明确说明冲突策略的插件,而不要只依赖普通的远程存储。