GrapesJS Starter

by cleaver

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/grapesjs/0.12.17/grapes.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/grapesjs/0.12.17/css/grapes.min.css">
<div id="gjs">
  <a href="#">Link 1</a>
  <br/>
  <br/>
  <br/>
  <a href="#">Link 2</a>
</div>

CSS

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

Babel + JSX

const hrefNextTrait = (editor) => {
	editor.DomComponents.addType('link', {
    model: {
      defaults: {
        traits: [
          {
            type: 'button',
            text: 'Upload image',
            full: true,
            command: () => {
              console.log('Broken button');
              alert('Broken button');
            },
          },
        ]
      }
    }
  });
};

const editor = grapesjs.init({
	container: '#gjs',
  height: '100%',
  fromElement: true,
  storageManager: false,
  plugins: [hrefNextTrait],
});