docs/api/device_manager.md
You can customize the initial state of the module from the editor initialization, by passing the following Configuration Object
const editor = grapesjs.init({
deviceManager: {
// options
}
})
Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance
const deviceManager = editor.Devices;
device:add New device added to the collection. The Device is passed as an argument.editor.on('device:add', (device) => { ... });
device:remove Device removed from the collection. The Device is passed as an argument.editor.on('device:remove', (device) => { ... });
device:select A new device is selected. Current and previous Device are passed as arguments.editor.on('device:select', (newDevice, prevDevice) => { ... });
device:update Device updated. The Device, changed properties, and update options are passed as arguments.editor.on('device:update', (device, changes, options) => { ... });
device Catch-all event for all the events mentioned above.editor.on('device', ({ event, model, ... }) => { ... });
Add new device
const device1 = deviceManager.add({
// Without an explicit ID, the `name` will be taken. In case of missing `name`, a random ID will be created.
id: 'tablet',
name: 'Tablet',
width: '900px', // This width will be applied on the canvas frame and for the CSS media
});
const device2 = deviceManager.add({
id: 'tablet2',
name: 'Tablet 2',
width: '800px', // This width will be applied on the canvas frame
widthMedia: '810px', // This width that will be used for the CSS media
height: '600px', // Height will be applied on the canvas frame
});
Returns Device Added device
Return device by ID
id String ID of the deviceconst device = deviceManager.get('Tablet');
console.log(JSON.stringify(device));
// {name: 'Tablet', width: '900px'}
Returns (Device | null)
Remove device
const removed = deviceManager.remove('device-id');
// or by passing the Device
const device = deviceManager.get('device-id');
deviceManager.remove(device);
Returns Device Removed device
Return all devices
const devices = deviceManager.getDevices();
console.log(JSON.stringify(devices));
// [{name: 'Desktop', width: ''}, ...]
Change the selected device. This will update the frame in the canvas
deviceManager.select('some-id');
// or by passing the page
const device = deviceManager.get('some-id');
deviceManager.select(device);
Get the selected device
const selected = deviceManager.getSelected();
Returns Device