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: 0 },
  plugins: ['gjs-blocks-basic']
});
//add section component
editor.DomComponents.addType('section', {
  // Make the editor understand when to bind `my-input-type`
  isComponent: el => el.tagName === 'SECTION',

  // Model definition
  model: {
    // Default properties
    defaults: {
      tagName: 'section',
    }
  }
});
// wrap in section
editor.on('component:mount', (component) => {
	setTimeout(() => {
  		 const parent = component.parent();
       
       if (!parent || parent.tagName !== 'body' || component.is('section')) {
       	return;
       }

			 const index = component.index();
       const sectionCmp = parent.append({ type: 'section' })[0];
       sectionCmp.append(component, { at: index });
  })
})