问题 #3406💬 已回答提出于 2021年4月20日作者 vatte210 个反应

如何创建自定义存储管理器?它不会在重新加载页面后从Canvas中设置保存数据

快速解答作者 artf

去掉这个“const resultKey = key.slice(4);”。你用前缀存储数据,但加载时没有

阅读下方完整回答 ↓

问题

大家好,我想把 Canvas 上的数据保存到 Redux 存储,这样可以,但重新加载页面后,存储加载方法没有把我的数据设置为构建器(Canvas),我不知道问题出在哪里,如果有人有解决办法请告诉我。 代码示例: “''js Grapejs.init({ .../// storageManager: { 类型:“redux-storage”, 自动保存:错误, 自动装填:1, }, .../// }); const reduxStorage = {}; const storageManager = editor.StorageManager; storageManager.add('redux-storage', { load(keys, clb, clbErr) { const 结果 = {}; keys.forEach(key => { const resultKey = key.slice(4); const item = localStorage.getItem(resultKey); cont value = reduxStorage[key]; 如果(项目) { 结果[结果键] = 项目; } }); 可能被调用在某种异步方法里 clb(结果); }, store(data, clb, clbErr) { 对于(让数据键入) { reduxStorage[key] =...

回答(2)

artf2021年4月20日

去掉这个“const resultKey = key.slice(4);”。你用前缀存储数据,但加载时没有

ClaudeCode2026年5月17日

谢谢你举报,@vatte21。 关于如何创建自定义存储管理器,它不会在重新加载页面后设置Canvas保存数据,这个问题很棒。推荐的 StyleManager 方法是使用事件驱动的 API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.on('change', () => console.log('something changed')); 组件生命周期 editor.on('compone...

相关问答

通过相似的问题讨论继续研究。

问题 #3222

新节点添加后,如何刷新/重新渲染?

我会手动在渲染组件中添加一个新节点。 视觉效果还可以,但无法保存,因为我的风格不是用自动生成的GrapesJS ID。 要手动解决这个难题,我双击要进入的组件,然后在画布主体中点击外部。然后,将 GrapesJS ID 和 'data-gjs-type='text' 添加到新节...

3 个回答更新于 2021年1月11日

问题 #3599

@keyframes即使我通过关键帧对象后也没有添加

你好,@artf, 我已经添加了 '让CC = 编辑器。Css作曲家; cc.setRule('.fadetop-animate', { 不透明度:0,'animation-name': 'fadeTop' }, { atRuleType: 'keyframes', atRul...

2 个回答更新于 2021年7月23日

问题 #3832

每次重载后,CSS 类都会被移除,并且每个 HTML 标签的自动生成 ID(例如:ivj5m-2)都会被更改

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? 铬 可复制演示链接 不是在那里 描述一下那个虫子 如何重现这个bug? 在 React 应用中安装葡萄 js 进入编辑器,拖动一个组件。(示例:文本组件) 使用样式管理器为组件做样式 保存到数据库...

4 个回答更新于 2021年9月29日

问题 #6543

面板未拆除

GrapesJS版本 [x] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? 镀铬 可复制演示链接 没有 描述一下那个虫子 如何复现这个漏洞? 来自教程 我的CSS风格 预期的行为是什么? 一块空白画布 目前的行为是什么? ... ![图片](https://git...

1 个回答更新于 2025年6月15日

与此问题匹配的付费插件

根据问题关键词和标签相关性精选,助你更快交付。

查看全部插件

正在加载付费插件推荐……

免费方案

在以下平台查看开源 GrapesJS 插件: GitHub 或在我们的免费目录中快速搜索。

浏览免费插件 →
高级方案

高级插件提供支持、定期更新和生产就绪的功能——为你节省数天的集成工作。

浏览高级插件 →

浏览插件分类

直接跳转到市场上的插件分类页面。