如何在VueJS应用中渲染GrapesJs生成的无控件纯HTML？

1. 保留GrapesJS实例引用 #

首先修改你的组件，把GrapesJS的实例存到组件内部，这样后续才能调用导出方法：

<template>
  <div>
    <div id="gjs"></div>
    <!-- 预览切换按钮 -->
    <button @click="togglePreview">切换成品预览</button>
    <!-- 预览区域 -->
    <div v-if="showPreview" class="preview-wrap">
      <style>{{ previewCss }}</style>
      <div v-html="previewHtml" class="preview-content"></div>
    </div>
  </div>
</template>

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

// 注意：无需重复导入min.js，import grapesjs已包含核心代码
// import 'grapesjs/dist/grapes.min.js'
// import 'grapesjs-preset-webpage/dist/grapesjs-preset-webpage.min.js'

export default {
  name: 'WebBuilder',
  data() {
    return {
      editor: null,
      showPreview: false,
      previewHtml: '',
      previewCss: ''
    }
  },
  mounted(){
    this.editor = 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'],
        },
      }
    })
  },
  methods: {
    togglePreview() {
      this.showPreview = !this.showPreview
      if (this.showPreview) {
        // 获取纯内容HTML和CSS（不含编辑器控件）
        this.previewHtml = this.editor.getHtml()
        this.previewCss = this.editor.getCss()
      }
    }
  }
}
</script>

<style scoped>
.preview-wrap {
  margin-top: 20px;
  border: 1px solid #eee;
  padding: 10px;
}
.preview-content {
  min-height: 300px;
}
</style>

2. 核心方法说明 #

• this.editor.getHtml()：获取编辑器生成的纯内容HTML，不会包含编辑器工具栏、框架等控件代码
• this.editor.getCss()：获取对应的样式代码，涵盖组件内联样式和全局样式

3. 独立页面渲染成品 #

如果需要在单独页面展示成品，可通过以下方式实现：

• 直接从localStorage读取存储的内容（你开启了storageManager，存储键为gjs-html和gjs-css）
• 或在编辑器页面导出HTML/CSS后，通过Vue路由参数、Vuex或后端存储传递到预览页面

示例：独立预览页面读取localStorage内容

<template>
  <div class="final-page">
    <style>{{ pageCss }}</style>
    <div v-html="pageHtml"></div>
  </div>
</template>

<script>
export default {
  name: 'FinalPage',
  data() {
    return {
      pageHtml: '',
      pageCss: ''
    }
  },
  mounted() {
    // 读取GrapesJS存储在localStorage的内容
    this.pageHtml = localStorage.getItem('gjs-html') || ''
    this.pageCss = localStorage.getItem('gjs-css') || ''
  }
}
</script>

注意事项 #

• 使用v-html时需注意XSS风险，若开放给普通用户编辑，建议添加HTML过滤逻辑
• 无需重复导入GrapesJS的min.js文件，import grapesjs已包含核心功能

内容的提问来源于stack exchange，提问作者Jayson