使用 GrapesJs API 存储管理器的自定义 StorageManager答案

【问题标题】：Custom StorageManager using GrapesJs API Storage Manager使用 GrapesJs API 存储管理器的自定义 StorageManager
【发布时间】：2023-03-15 15:55:01
【问题描述】：

我是 GrapesJs 的新手，正在努力实现以下目标：

我正在尝试使用 Storage API of GrapesJs 实现自定义存储管理器

我正在尝试从 localStorage 获取/设置数据（即 ResponseFromLocalStorage）。

下面是我的代码：

const editor = grapesjs.init({
    container: '#gjs',
    fromElement: true,
    height: '500px',
    width: 'auto',
    storageManager: { 
        type: 'jekyllLocalStore'
    }
});

//Custom Storage
var storeMan=editor.StorageManager;
//set Config
storeMan.setAutosave=true;
storeMan.setStepsBeforeSave=1;

//Now Add Custom Storage Manager
storeMan.add('jekyllLocalStore', {
    load: function(ResponseFromLocalStorage, clb1) {
          var res = {};
          $.each(ResponseFromLocalStorage,function(key,val){
            console.log(key+'--->'+val);
            if(val) res[key] = val;
          });
          clb1(res); // might be called inside some async method
    },
    store: function(ResponseFromLocalStorage, clb2) {
           localStorage.setItem("wholeRes123",JSON.stringify(ResponseFromLocalStorage));
           clb2(); // might be called inside some async method
    }
});

代码执行时，名为 wholeRes123 的 localStorage 项目已成功创建，其中的数据来自 ResponseFromLocalStorage，但在存储更改时并未更新wholeRes123。

我的理解是，如果autoSave设置为true，那么应该在编辑完成后开始存储，然后store:应该执行代码。

我做错了什么？请帮我解决这个问题。

谢谢。

【问题讨论】：

标签： grapesjs

【解决方案1】：

您的代码可能正在保存，但未加载。尝试将 autoload 添加为 true，或者保存后尝试调用它

【讨论】：