我已经使用grapesjs和grapesjs-preset-webpage设置了一个VueJS应用程序，包括GrapesJS。编辑器工作得很好，但是我在文档中看不到如何在没有编辑器控件的情况下呈现编辑器创建的HTML。
编辑器会显示以下内容，这对于处于编辑器模式的CMS来说是完美的：

的数据
但是，我希望能够将编辑器设计的结果显示为这样的成品网页：

的
从GrapesJS文档中我不清楚这在VueJS应用程序中是如何实现的？？
我的代码是：

<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>

字符串