GrapesJS Starter

by artur_arseniev

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>
<div id="gjs">
  <div style="padding: 25px">Hello World!!!</div>
</div>

CSS

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

Babel + JSX

const editor = grapesjs.init({
	container: '#gjs',
  fromElement: 1,
  height: '100%',
  storageManager: {
   	type: 'local', // Storage type. Available: local | remote
    autosave: true, // Store data automatically
    autoload: true, // Autoload stored data on init
  	//type: 0
  },
  plugins: ['gjs-blocks-basic']
});

editor.BlockManager.add('block-test-class').set({
	label: 'Test Class',
  content: {
  	type: 'test-class',
    content: 'Test'
  }
});

editor.DomComponents.addType('test-class', {
	model: {
    defaults: {
      name: 'test-class',
      icon: 'A',
      tagName: 'div',
      classes: ['section'],
      draggable: 'body > *',
      attributes: { 
        'data-type': 'test-class',
      },
      traits: [
        "id",
      ]
    }
  }, 
  isComponent(el) {
    if(el && el.classList && el.classList.contains('section')) {
      return {type: 'test-class'};
    }
  } 
})