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']
});

editor.on("load",editor=>{
	const stack = editor.StyleManager.getType('stack');
  const propModel = stack.model;
  editor.StyleManager.addType("dinaBg",{
    model:propModel.extend({
      defaults: () => ({
        ...propModel.prototype.defaults,
        detached: 1,
        preview: 1,
        full: 1,
        prepend: 1,
        properties: [
          {
            name: ' ',
            property: 'background-image',
            type: 'file',
            functionName: 'url',
          },{
            property: 'background-repeat',
            type: 'select',
            defaults: 'repeat',
            options: [
              { value: 'repeat' },
              { value: 'repeat-x' },
              { value: 'repeat-y' },
              { value: 'no-repeat' }
            ],
          },{
            property: 'background-position',
            type: 'select',
            defaults: 'left top',
            options: [
              { value: 'left top' },
              { value: 'left center' },
              { value: 'left bottom' },
              { value: 'right top' },
              { value: 'right center' },
              { value: 'right bottom' },
              { value: 'center top' },
              { value: 'center center' },
              { value: 'center bottom' }
            ],
          },{
            property: 'background-attachment',
            type: 'select',
            defaults: 'scroll',
            options: [
              { value: 'scroll' },
              { value: 'fixed' },
              { value: 'local' }
            ],
          },{
            property: 'background-size',
            type: 'select',
            defaults: 'auto',
            options: [
              { value: 'auto' },
              { value: 'cover' },
              { value: 'contain' }
            ],
          },{
          ...