Multiple Pages

by artur_arseniev

HTML

<script src="https://unpkg.com/grapesjs"></script>
<script src="https://unpkg.com/grapesjs-blocks-basic"></script>
<link rel="stylesheet" href="https://unpkg.com/grapesjs/dist/css/grapes.min.css">
<div class="app-wrap">
  <div class="pages-wrp">
    <div class="add-page" @click="addPage">Add new page</div>
    <div class="pages">
      <div v-for="page in pages" :key="page.id" :class="{page: 1, selected: isSelected(page) }" @click="selectPage(page.id)">
        {{ page.get('name') || page.id }} <span v-if="!isSelected(page)" @click="removePage(page.id)" class="page-close">&Cross;</span>
      </div>
    </div>
  </div>
  <div class="editor-wrap">
    <div id="gjs"></div>
  </div>
</div>

SCSS

body, html {
  height: 100%;
  margin: 0;
}
.app-wrap {
  height: 100%;
  width: 100%;
  display: flex;
}
.editor-wrap  {
  widtH: 100%;
  height: 100%;
}
.pages-wrp, .pages {
  display: flex;
  flex-direction: column
}
.pages-wrp {
  background: #333;
  padding: 5px;
}
.add-page {
  background: #444444;
  color: white;
  padding: 5px;
  border-radius: 2px;
  cursor: pointer;
  white-space: nowrap;
  margin-bottom: 10px;
}
.page {
  background-color: #444;
  color: white;
  padding: 5px;
  margin-bottom: 5px;
  border-radius: 2px;
  cursor: pointer;

  &.selected {
    background-color: #706f6f
  }
}

.page-close {
  opacity: 0.5;
  float: right;
  background-color: #2c2c2c;
  height: 20px;
  display: inline-block;
  width: 17px;
  text-align: center;
  border-radius: 3px;

  &:hover {
    opacity: 1;
  }
}

Babel + JSX

const editor = grapesjs.init({
  container: '#gjs',
  height: '100%',
  storageManager: false,
  plugins: ['gjs-blocks-basic'],
  pageManager: {
    pages: [{
      id: 'page-1',
      name: 'Page 1',
      component: '<div id="comp1">Page 1</div>',
      styles: '#comp1 { color: red }',
    }, {
      id: 'page-2',
      name: 'Page 2',
      component: '<div id="comp2">Page 2</div>',
      styles: '#comp2 { color: green }',
    }, {
      id: 'page-3',
      name: 'Page 3',
      component: '<div id="comp3">Page 3</div>',
      styles: '#comp3 { color: blue }',
    }]
  },
});

const pm = editor.Pages;

const app = new Vue({
  el: '.pages-wrp',
  data: { pages: [] },
  mounted() {
    this.setPages(pm.getAll());
    editor.on('page', () => {
      this.pages = [...pm.getAll()];
    });
  },
  methods: {
    setPages(pages) {
      this.pages = [...pages];
    },
    isSelected(page) {
      return pm.getSelected().id == page.id;
    },
    selectPage(pageId) {
      return pm.select(pageId);
    },
    removePage(pageId) {
      return pm.remove(pageId);
    },
    addPage() {
      const len = pm.getAll().length;
      pm.add({
        name: `Page ${len + 1}`,
        component: '<div>New page</div>',
      });
    },
  }
});