You can customize the initial state of the module from the editor initialization
const editor = grapesjs.init({
// ...
layerManager: {
// ...
},
})Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance
const layers = editor.Layers;layer:root- Root layer changed. The new root component is passed as an argument to the callback.layer:component- Component layer is updated. The updated component is passed as an argument to the callback.
- setRoot
- getRoot
- getComponents
- setOpen
- isOpen
- setVisible
- isVisible
- setlocked
- isLocked
- setName
- getName
- getLayerData
Update the root layer with another component.
const component = editor.getSelected();
layers.setRoot(component);Returns Component
Get the current root layer.
const layerRoot = layers.getRoot();Returns Component
Get valid layer child components (eg. excludes non layerable components).
componentComponent Component from which you want to get child components
const component = editor.getSelected();
const components = layers.getComponents(component);
console.log(components);Update the layer open state of the component.
Check the layer open state of the component.
componentComponent
Returns Boolean
Update the layer visibility state of the component.
Check the layer visibility state of the component.
componentComponent
Returns Boolean
Update the layer locked state of the component.
Check the layer locked state of the component.
componentComponent
Returns Boolean
Update the layer name of the component.
Get the layer name of the component.
componentComponent
Returns String Component layer name
Get layer data from a component.
componentComponent Component from which you want to read layer data.
const component = editor.getSelected();
const layerData = layers.getLayerData(component);
console.log(layerData);Returns Object Object containing the layer data.