Editor Integration

Advanced example

by STHayden

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://www.shutterstock.com/editor/image/assets/integration.js"></script>
<nav class="editor-menu navbar navbar-default navbar-inverse">
  <div class="container-fluid">
    <a href="#" class="navbar-brand">Editor Integration</a>
    <ul class="nav navbar-nav navbar-right">
      <li class="dropdown">
        <a href="#" class="dropdown-toggle editor-actions-trigger" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" style="display: none">Actions <span class="caret"></span></a>
        <ul class="editor-actions dropdown-menu">
          <li><a href="#" data-action="hide">Hide</a></li>
          <li><a href="#" data-action="show">Show</a></li>
          <li><a href="#" data-action="jpghigh">Get high resolution JPG</a></li>
          <li><a href="#" data-action="jpglow">Get compressed JPG</a></li>
          <li><a href="#" data-action="png">Get PNG</a></li>
          <li><a href="#" data-action="getDesign">Get design data</a></li>
          <li><a href="#" data-action="setDesign">Set design data</a></li>
        </ul>
      </li>
    </ul>
  </div>
</nav>
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-12">
      <div class="editor-message alert alert-success" style="display: none">
      </div>
    </div>
  </div>
  <div class="row" style="margin-bottom: 20px">
    <div class="col-sm-6 output output output-data" style="display: none">
      <h4>
        Raw data
      </h4>
      <textarea class="form-control output-data-value" rows="8"></textarea>
    </div>
    <div class="col-sm-6 output output-image" style="display: none">
      <h4>
        Image
      </h4>
      <img src="#" class="output-image-value"...

CSS

body,
html {
  height: 100%;
}

iframe {
  border: 0;
}

.editor-menu {
  z-index: 999999;
}

#editor,
#editor > div {
  height: 768px;
}

JavaScript

// Note: 'apiKey' only permits access from https://jsfiddle.net
window.editorInstance = window.Editor({
  apiKey: 'eJrUUsMD418TVMaQa5m2u8Kk',
  language: 'en',
  image: 'https://www.shutterstock.com/blog/wp-content/uploads/sites/5/2019/07/SSTK-Elements-CI.jpg?w=1440&h=960&crop=1',
  excludeFeatures: ['shapes'],
  initialPanel: 'backgrounds',
  logo: true,
  logoUrl: 'https://www2.shutterstock.com/base/public/images/logos/logo-shutterstock-de64a370ef.png',
  primaryActionText: 'Save and close',
  container: document.querySelector('#editor'),
  canvas: {
    height: 500,
    width: 500,
    fill: 'rgb(62, 69, 79)'
  },
  presets: [{
    name: 'Icon',
    height: 128,
    width: 128
  }, {
    name: 'Book Cover',
    height: 2400,
    width: 1600
  }],
  onPrimaryAction: function() {
    window.editorInstance.getBase64({
      format: 'jpg',
      quality: .91
    }).then(function(base64) {
      // Save design data, hide instance, and display success message
      $('.editor-message').text('Design successfully saved').show();
      window.editorInstance.hide();
      window.setOutputImage(base64);
    });
  }
});

// Launch instance of Editor
window.editorInstance.launch().then(function(editor) {
  // Actions
}).catch(function(err) {
  // Handle error
});

// Editor instance has opened
window.editorInstance.on('open', function() {
  // Show Editor menu options in UI
  $('.editor-actions-trigger').show();
});