GrapesJS

# DataSources

This module manages data sources within the editor. You can initialize the module with the editor by passing an instance of EditorModel.

const editor = new EditorModel();
const dsm = new DataSourceManager(editor);

Once the editor is instantiated, you can use the following API to manage data sources:

const dsm = editor.DataSources;

add - Add a new data source.
get - Retrieve a data source by its ID.
getAll - Retrieve all data sources.
remove - Remove a data source by its ID.
clear - Remove all data sources.

Example of adding a data source:

const ds = dsm.add({
  id: 'my_data_source_id',
  records: [
    { id: 'id1', name: 'value1' },
    { id: 'id2', name: 'value2' }
  ]
});

# Parameters

em EditorModel Editor model.

# add

Add new data source.

# Parameters

props Object (opens new window) Data source properties.
opts AddOptions (optional, default {})

# Examples

const ds = dsm.add({
 id: 'my_data_source_id',
 records: [
   { id: 'id1', name: 'value1' },
   { id: 'id2', name: 'value2' }
 ]
});

Returns [DataSource] Added data source.

# get

Get data source.

# Parameters

id String (opens new window) Data source id.

# Examples

const ds = dsm.get('my_data_source_id');

Returns [DataSource] Data source.

# getValue

Get value from data sources by key

# Parameters

key String (opens new window) Path to value.
defValue any

Returns any const value = dsm.getValue('ds_id.record_id.propName', 'defaultValue');

# remove

Remove data source.

# Parameters

id (String (opens new window) | [DataSource]) Id of the data source.
opts RemoveOptions?

# Examples

const removed = dsm.remove('DS_ID');

Returns [DataSource] Removed data source.

# fromPath

Retrieve a data source, data record, and optional property path based on a string path. This method parses a string path to identify and retrieve the corresponding data source and data record. If a property path is included in the input, it will also be returned. The method is useful for accessing nested data within data sources.

# Parameters

path String (opens new window) The string path in the format 'dataSourceId.recordId.property'.

# Examples

const [dataSource, dataRecord, propPath] = dsm.fromPath('my_data_source_id.record_id.myProp');
// e.g., [DataSource, DataRecord, 'myProp']

Returns [DataSource?, DataRecord?, String (opens new window)?] An array containing the data source, data record, and optional property path.

# store

Store data sources to a JSON object.

Returns Array (opens new window) Stored data sources.

# load

Load data sources from a JSON object.

# Parameters

data Object (opens new window) The data object containing data sources.

Returns Object (opens new window) Loaded data sources.

← Parser ‍ ‍ ‍ DataSource →