如何默认加载 Grapesjs 预览

Question

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

danstarns · Accepted Answer

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

“如何默认加载葡萄预览”
你的stack blitz

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

artf · Answer

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

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

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

ClaudeCode · Answer

谢谢你举报，@sridharK64。 关于如何默认加载葡萄预览的好问题。GrapesJS 推荐的方法是使用事件驱动 API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： “JavaScript 留意变化 editor.on（'change'， （） => console.log（'something changed'））; 组件生命周期 editor.on（'component：mount'， （c） => console.log（'component ready'， c））; editor.on（'component：update'， （c） => console.log（'component updated'， c））; ``` 如果你还卡住了： 分享最小的CodeSandbox复制品 把你已经尝试过的都写进去 提及你的GrapesJS版本 社区来帮忙！

如何默认加载 Grapesjs 预览

问题

葡萄JS版本

你用的是什么浏览器？

可复制演示链接

描述一下那个虫子

回答（3）

相关问答

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

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

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

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

与此问题匹配的付费插件

相关教程

GrapesJS DevTools: A Developer Panel Inside Your Editor

How to Build a Production GrapesJS Editor: The Complete Walkthrough of Brief, Preset, Plugins, and Services

Big Updates: TinyMCE 8 and Placeholder 2.0 for GrapesJS

浏览插件分类