GrapesJS Starter

by Jithin Raj P R

HTML

<script src="https://unpkg.com/grapesjs"></script>
<link rel="stylesheet" href="https://unpkg.com/grapesjs/dist/css/grapes.min.css">
<script src="https://unpkg.com/grapesjs-blocks-basic"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://rawgit.com/select2/select2/master/dist/js/select2.js"></script>
<link rel="stylesheet" href="https://rawgit.com/select2/select2/master/dist/css/select2.min.css">
<div id="gjs">
  <p>
    Hello world.
  </p>
  <p>
    Drag me somewhere...
  </p>
  <p>
    Bye bye world.
  </p>
</div>

CSS

body, html {
  margin: 0;
  height: 100%;
}

Babel + JSX

const editor = grapesjs.init({
	container: '#gjs',
  fromElement: 1,
  height: '100%',
  storageManager: { type: 0 },
  plugins: ['gjs-blocks-basic']
});

const selectorManager = editor.SelectorManager;

editor.on('component:add', (model) => {
	alert('Add');
});

$('select').select2();

$('.gjs-devices').on('select2:select', function (event) {
console.log(event);
  editor.setDevice(e.params.data.id);
});


$('#gjs-clm-states').on('select2:select', function (e) {
 selectorManager.setState(e.params.data.id);
});