如何默认加载 Grapesjs 预览

Question

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ 最新消息 可复制演示链接 https://stackblitz.com/edit/grapesjs-react-custom-ui-nrqcgn？file=src%2FApp.tsx 描述一下那个虫子 如何复现这个漏洞？...... 预期的行为是什么？ ... 目前的行为是什么？ ... 如果需要执行某些代码以重现该漏洞，请将其粘贴到下面： 行为准则 [X] 我同意遵守本项目的行为准则

danstarns · Accepted Answer

你好，@sridharK64感谢你的报告，能否详细说明一下你的问题？因为我们只有：

“如何通过默认预览加载 grapesjs ”
你的stack blitz

你能告诉我们你想要达到什么目标吗？

artf · Answer

@sridharK64我明白你的意思，但下次试着详细说明。

要在加载时触发预览，这就足够了 “''js editor.onReady（（） => { editor.runCommand（'core：preview'） });

但在你的例子中，你用的是“@grapesjs/React”，并带有完整的自定义界面，这意味着你必须自己实现如何用 React 组件处理预览。

GJS Helper · Answer

要默认在预览模式下加载GrapesJS，你需要先初始化编辑器，然后执行内置的core:preview命令。该命令在编辑和预览之间切换编辑器状态，实际上隐藏了编辑器界面，只显示渲染内容。 在加载时实现这一点最可靠的方法是监听load事件，当GrapesJS编辑器完全初始化并准备交互时，事件会触发。 解决方案 像平常一样初始化GrapesJS。 在编辑器实例中监听load事件。 在load事件处理程序中执行core:preview命令。 以下是实现的方法，比如适应你提供的StackBlitz演示中的React上下文： 解释 editor.on('load', ...)事件监听器确保editor.runCommand('core:preview')只有在GrapesJS实例完全加载并渲染初始状态后才执行。该命令实际上将编辑器切换为只读渲染视图，隐藏了典型编辑器的界面元素，如面板、工具栏和组件轮廓。 要退出预览模式并返回编辑界面，通常会再次执行同样的命令：editor.runCommand('core:preview');。这通常由自定义工具栏中的按钮或键盘快捷键触发。这种方式为直接以“仅视...

如何默认加载 Grapesjs 预览

问题

GrapesJS 版本

你用的是什么浏览器？

可复制演示链接

描述一下那个虫子

行为准则

回答（3）

相关问答

React 自定义界面“模态”无法显示“代码”

自定义组件在初次渲染时无法在 grapsjs/studio 中显示

在 Angular 应用加载时图标没有加载

GrapesJS v0.21.5 在 NodeJS（无头）中无法工作

与此问题匹配的付费插件

相关教程

Introducing Search on GJS.Market

如何在2026年用 GrapesJS 构建AI驱动的页面构建器

2026年构建一个SaaS页面构建器需要多少钱？

浏览插件分类