How do you output the HTML from GrapesJs in a VueJS application?

Viewed 23

I have set up a VueJS application including GrapesJS using grapesjs & grapesjs-preset-webpage. The editor works perfectly, but I cannot see in the documentation how to render just the HTML created by the editor without the editor controls being present.

The editor displays this, which is perfect for a CMS when in editor mode : enter image description here

However, I wish to be able to display the result of the editor design as a finished webpage like this:

enter image description here

It is not clear to me from the GrapesJS documentation how this would be achieved in a VueJS application??

My code is:

<template>
  <div>
    <div id="gjs"></div>
  </div>
</template>

<script>
import grapesjs from 'grapesjs'
import 'grapesjs/dist/css/grapes.min.css'
import 'grapesjs/dist/grapes.min.js'
import 'grapesjs-preset-webpage/dist/grapesjs-preset-webpage.min.css'
import 'grapesjs-preset-webpage/dist/grapesjs-preset-webpage.min.js'

export default {
name: 'WebBuilder',

 mounted(){
   grapesjs.init({
     container: '#gjs',
     height: '100vh',
     width: '100%',
     plugins: ['gjs-preset-webpage'],
     storageManager: {
       id: 'gjs-',
       type: 'local',
       autosave: true,
       storeComponents: true,
       storeStyles: true,
       storeHtml: true,
       storeCss: true,
     },
     deviceManager: {
       devices:
       [
         {
           id: 'desktop',
           name: 'Desktop',
           width: '',
         },
         {
           id: 'tablet',
           name: 'Tablet',
           width: '768px',
           widthMedia: '992px',
         },
         {
           id: 'mobilePortrait',
           name: 'Mobile portrait',
           width: '320px',
           widthMedia: '575px',
         },
       ]
     },
     pluginsOpts: {
       'grapesjs-preset-webpage': {
         blocksBasicOpts: {
           blocks: ['column1', 'column2', 'column3', 'column3-7', 'text',     'link', 'image', 'video'],
           flexGrid: 1,
         },
         blocks: ['link-block', 'quote', 'text-basic'],
       },
     }
   })
 },
}
</script>
0 Answers
Related