Page.getMainComponent().view 在选择页面时显示未定义
你好@iabhiyaan,当“page:select”触发时,画布内的iframe还没有加载,所以你需要等它们加载完后才能访问它的DOM。 “''js editor.on('page:select', page => { const frame = page.getMainFrame(); frame.once('loaded', () => { const rootEl = frame.getComponent().getEl(); console.log(rootEl.querySelector('section')); }); }); ```
阅读下方完整回答 ↓问题
你好,@artf, 我想获取所选页面的HTML元素。但使用以下代码时,会返回未定义的状态: “''js editor.on('page:select', page => { page.getMainComponent().view.el.querySelector('section'); 那个页面里有个section标签...... });
回答(3)
你好@iabhiyaan,当“page:select”触发时,画布内的iframe还没有加载,所以你需要等它们加载完后才能访问它的DOM。 “''js editor.on('page:select', page => { const frame = page.getMainFrame(); frame.once('loaded', () => { const rootEl = frame.getComponent().getEl(); console.log(rootEl.querySelector('section')); }); }); ```
谢谢你@artf。
谢谢你举报,@iabhiyaan。 感谢你分享关于page.getMainComponent().view在选择页面时显示未定义的报告。为了帮助团队调查并优先排序: 请提供: 一个最小可复现的例子(CodeSandbox/JSFiddle) 你的GrapesJS版本号 浏览器和操作系统信息 浏览器控制台的任何错误信息 重现问题的步骤 最有帮助的是什么: 简约代码示例(不是你整个项目) 屏幕录制或截图显示问题 明确区分预期行为与实际行为 你正在使用的GrapesJS配置 有了这些细节,维护者可以更快地识别和优先排序修复。GrapesJS团队对有充分记录的问题反应迅速。
相关问答
通过相似的问题讨论继续研究。
问题 #3219
为块添加类型,并带类名的 CSS
你好@artf 我卡在一件事上,我想添加一个模块,也想用职业名称来增加风格 这是我的代码 -: 这正好给了我想要的效果 HTML部分是HTML代码,样式部分是样式部分,但我想为它添加一个新的特征,以及如何在这里定义类型 另一方面,当我定义类型并做类似的事情时 添加一个新特性后,...
问题 #3448
向组件应用自定义类似乎没有效果
当某些条件未满足时,我会在组件上添加一个类,比如没有 href 集。我查看了源代码,看到了“nolink”类,但它没有把背景色设置为红色,检查元素时也看不到它,这就是我尝试添加它的方式,但当我用cc.getAll()时,我看不到nolink类,所以我不确定问题出在哪里 'var...
问题 #3122
复制组件缺少媒体样式
版本: 0.16.27 摘要: 复制组件缺少媒体样式 繁殖步骤: 试着在平板或手机上更改一些内容 复制更改后的组件 意料之中: 复制的组件具有媒体样式 真实: 重复组件没有媒体样式
问题 #3627
:我正在尝试复制页面,但由于 ID,样式无法应用,结尾的 -2,-3 发生了变化。
“JavaScript const duplicatePage = (编辑者) => { let components = editor.getHtml(); 令 css = editor.getCss(); 让newPage = 编辑器。Pages.add({ 样式:CSS,...
与此问题匹配的付费插件
根据问题关键词和标签相关性精选,助你更快交付。
正在加载付费插件推荐……
相关教程
关于同一主题的深入指南。
教程
Vanilla GrapesJS vs GrapesJS With Plugins: What You Actually Get Out of the Box (2026)
New to GrapesJS? See exactly what the stock editor gives you, where it falls short, and which plugins close the gaps — a beginner-friendly 2026 comparison
教程
Lighthouse for GrapesJS: Audit Accessibility and SEO Without Leaving the Editor
Live WCAG 2.1/2.2 accessibility auditor + SEO manager for GrapesJS. Every finding is bound to the exact component — click to select, then one-click fix.
教程
GrapesJS DevTools: A Developer Panel Inside Your Editor
If you've ever debugged GrapesJS with console.log(editor.getSelected()) and a dozen throwaway event listeners — this post is for you.
浏览插件分类
直接跳转到市场上的插件分类页面。