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>', }); }, } });
<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">⨯</span> </div> </div> </div> <div class="editor-wrap"> <div id="gjs"></div> </div> </div>
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; } }