问题 #3631💬 已回答提出于 2021年7月21日作者 anuragk151 个反应

How to load dynamic content in the final HTML file?

快速解答作者 stf1981❤ 1

我觉得你应该搜索组件相关的JavaScript -> https://grapesjs.com/docs/modules/Components-js.html#component-related。这段 js 代码嵌入在 html 输出中。

问题

我到处找过，包括问题部分，也尝试了几种方法。但真的不太确定如何在组件里总是加载动态内容（不仅仅是导出或通过编辑器保存时）。

我想在 grapejs 组件中加入一个脚本，它总是从网页抓取内容并更新组件。比如，当我写博客并存储在数据库里时。现在每当有人访问我的着陆页（用 Grapesjs做的）时，我希望他们能看到我最新的博客。我不想通过编辑器手动重建 grapejs 页面。

另外，如果有终端用户访问网站，我只需要发送 Grapejs html和css，对吧？没有组件？

抱歉如果这是个新手问题或者有人之前已经回答过。

回答（4）

stf1981• 2021年7月21日

我觉得你应该搜索组件相关的JavaScript -> https://grapesjs.com/docs/modules/Components-js.html#component-related。这段 js 代码嵌入在 html 输出中。

anuragk15• 2021年7月21日

我记得你会搜索与组件相关的JavaScript -> https://grapesjs.com/docs/modules/Components-js.html#component-related。这段 js 代码嵌入在 html 输出中。

所以每次组件加载时，它都会通过 JS 脚本动态加载数据？另外，对于终端用户来说，我只需要返回 Grapesjs 生成的 html+cas 文件，对吧？

stf1981• 2021年7月21日

所以每次组件加载时，它都会通过 JS 脚本动态加载数据？

是的

另外，对于终端用户，我只需要返回由 Grapesjs 生成的 html+cas 文件，对吧？

是的，组件里的 JS 脚本在 HTML 里，参见 'editor.getHtml（）'

GJSBlock• 2026年5月17日

谢谢你举报，@anuragk15。关于如何加载动态内容的最终HTML文件，这个问题非常好。推荐的 StyleManager 方法是使用事件驱动的 API。从这里开始：查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/）寻找“on（）”事件监听器方法大多数操作可以通过监听编辑器和组件事件来实现常见模式： “JavaScript 留意变化 editor.on（'change'，（） => console.log（'something changed'））; 组件生命周期 editor.on（'component：mount'，（c） =...

在 GitHub 上查看完整讨论 →