grapesjs/docs/api/storage_manager.md

Storage

You can customize the initial state of the module from the editor initialization, by passing the following Configuration Object

const editor = grapesjs.init({
 storageManager: {
   // options
 }
})

Once the editor is instantiated you can use its API and listen to its events. Before using these methods, you should get the module from the instance.

// Listen to events
editor.on('storage:start', () => { ... });

// Use the API
const storageManager = editor.Storage;
storageManager.add(...);

Available Events

• storage:start Storage request start.

editor.on('storage:start', (type) => {
 console.log('Storage start');
});

storage:start:store Storage store request start. The project JSON object to store is passed as an argument (which you can edit).

editor.on('storage:start:store', (data) => {
 console.log('Storage start store');
});

• storage:start:load Storage load request start.

editor.on('storage:start:load', () => {
 console.log('Storage start load');
});

storage:load Storage loaded the project. The loaded project is passed as an argument.

editor.on('storage:load', (data, res) => {
 console.log('Storage loaded the project');
});

storage:store Storage stored the project. The stored project is passed as an argument.

editor.on('storage:store', (data, res) => {
 console.log('Storage stored the project');
});

storage:after Storage request completed. Triggered right after storage:load/storage:store.

editor.on('storage:after', (type) => {
 console.log('Storage request completed');
});

storage:end Storage request ended. This event triggers also in case of errors.

editor.on('storage:end', (type) => {
 console.log('Storage request ended');
});

storage:end:store Storage store request ended. This event triggers also in case of errors.

editor.on('storage:end:store', () => {
 console.log('Storage store request ended');
});

storage:end:load Storage load request ended. This event triggers also in case of errors.

editor.on('storage:end:load', () => {
 console.log('Storage load request ended');
});

• storage:error Error on storage request.

editor.on('storage:error', (err, type) => {
 console.log('Storage error');
});

• storage:error:store Error on store request.

editor.on('storage:error:store', (err) => {
 console.log('Error on store');
});

• storage:error:load Error on load request.

editor.on('storage:error:load', (err) => {
 console.log('Error on load');
});

Methods

• getConfig
• isAutosave
• setAutosave
• getStepsBeforeSave
• setStepsBeforeSave
• getStorages
• getCurrent
• getCurrentStorage
• setCurrent
• getStorageOptions
• add
• get
• store
• load

getConfig

Get configuration object

Returns Object

isAutosave

Check if autosave is enabled.

Returns Boolean

setAutosave

Set autosave value.

Parameters

• value Boolean

getStepsBeforeSave

Returns number of steps required before trigger autosave.

Returns Number

setStepsBeforeSave

Set steps required before trigger autosave.

Parameters

• value Number

add

Add new storage.

Parameters

• type String Storage type

• storage Object Storage definition

  • storage.load Function Load method
  • storage.store Function Store method

Examples

storageManager.add('local2', {
  async load(storageOptions) {
    // ...
  },
  async store(data, storageOptions) {
    // ...
  },
});

get

Return storage by type.

Parameters

• type String Storage type

Returns (Object | null)

getStorages

Get all storages.

Returns Object

getCurrent

Get current storage type.

Returns String

setCurrent

Set current storage type.

Parameters

• type String Storage type

getStorageOptions

Get storage options by type.

Parameters

• type String Storage type

Returns Object

store

Store data in the current storage.

Parameters

• data Object Project data.
• options Object? Storage options. (optional, default {}as T)

Examples

const data = editor.getProjectData();
await storageManager.store(data);

Returns Object Stored data.

load

Load resource from the current storage by keys

Parameters

• options Object? Storage options. (optional, default {}as T)

Examples

const data = await storageManager.load();
editor.loadProjectData(data);

Returns Object Loaded data.