Events


onDesignLoad

This event is called when your design is loaded in the editor.

unlayer.addEventListener('onDesignLoad', function(data) {
  // Design is loaded
  var json = data.design; // design json
})

onImageUpload

This event is called when an image is uploaded by the user.

unlayer.addEventListener('onImageUpload', function(data) {
  var image = data.image;
  var url = image.url;
  var width = image.width;
  var height = image.height;
})

Content Events

These events are fired when something is added, removed, modified or moved.

Body Modified

unlayer.addEventListener('body:modified', function(data) {
  var body = data.body;
  var changes = data.changes;
  console.log('body:modified', body, changes);
})

Row Added

unlayer.addEventListener('row:added', function(data) {
  var row = data.row;
  console.log('row:added', row);
})

Row Modified

unlayer.addEventListener('row:modified', function(data) {
  var row = data.row;
  var changes = data.changes;
  console.log('row:modified', row, changes);
})

Row Moved

unlayer.addEventListener('row:moved', function(data) {
  var row = data.row;
  console.log('row:moved', row);
})

Row Removed

unlayer.addEventListener('row:removed', function(data) {
  var row = data.row;
  console.log('row:removed', row);
})

Content Added

unlayer.addEventListener('content:added', function(data) {
  var content = data.content;
  console.log('content:added', content);
})

Content Modified

unlayer.addEventListener('content:modified', function(data) {
  var content = data.content;
  var changes = data.changes;
  console.log('content:modified', content, changes);
})

Content Moved

unlayer.addEventListener('content:moved', function(data) {
  var content = data.content;
  console.log('content:moved', content);
})

Content Removed

unlayer.addEventListener('content:removed', function(data) {
  var data = data.content;
  console.log('content:removed', content);
})