没有ID,显示没有样式但带有“script”的元素,导致脚本无法运行这些元素
问题
GrapesJS版本[X] 我确认使用最新版本GrapesJS你用的是什么浏览器? Chrome最新款可复制演示链接 https://github.com/padcom/grapesjs-无ID-for-element-示例描述一下那个虫子 在创建自定义GrapesJS组件时,如果这些组件具有script()(组件的运行时行为),且该组件没有样式,那么根元素没有id属性,这会导致document.querySelectorAll('#<id-goes-here')失败,运行时脚本也不会被调用。 在给出的示例中,我创建了一个特殊的自定义元素,称为<content-preview>(https://github.com/padcom/grapesjs-no-id-for-element-example/blob/master/preview.ts),以便我能在一页中展示问题。以下是复制步骤:克隆仓库(https://github.com/padcom/grapesjs-no-id-for-element-example)npm installnpm start导航 http://localhost:5173将example块放到画布上打开控制台 当前结果: 你会在控制台看到一条日志,说明组件已在<iframe>内初始化 预期结果: 你还会在控制台看到日志,说明组件已在页面内初始化更改...
回答(2)
问题源于'jsInHtml: false'的使用以及内部JS生成器的处理方式。 我会尽量在下一个版本里修复这个问题。
你描述的问题是GrapesJS中已知的行为,涉及HTML序列化过程中组件ID的生成和优化。当自定义组件有script()函数但没有显式样式应用时,GrapesJS可能会在最终HTML输出中省略组件根元素中的id属性(由editor.getHtml()生成)。这是因为GrapesJS主要使用ID来引用组件以进行样式设计。如果没有样式,ID可能被认为内部GrapesJS操作中没有必要,从而省略。 这种遗漏会破坏依赖document.querySelectorAll('#<component-id>')来寻找和初始化组件的脚本。 根本原因 GrapesJS的内部逻辑用于生成和保存id属性,与其样式...
相关问答
通过相似的问题讨论继续研究。
问题 #3465
Update breaks some things with css
警告 请阅读并遵循接下来的三步,然后在发布问题前删除它们遵守贡献指南 https://github.com/artf/grapesjs/blob/master/CONTRIBUTING.md先快速搜索一下,看看有没有人没开同样的问题所有相关陈述/问题都必须填写/回答,否则问题可...
问题 #5990
当你删除组件时,组件间的重复类也会被删除。
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器? Chrome 126.0.6478.127(Windows) 可复制演示链接 https://jsfiddle.net/t06s4oLb/8/ 描述一下那个虫子 如何复现这个漏洞?将第1...
问题 #5334
在画布中选择自定义组件类型无法正常工作
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器? Chrome、Opera、Edge 等 可复制演示链接 https://jsfiddle.net/crszh0jo/6/ 描述一下那个虫子 我正试图让它像这里描述的那样工作[[问题] C...
问题 #5274
Parser bug inside Remix
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器? Chrome v114 可复制演示链接 https://github.com/wunksert/remix-grapes-error/tree/main 描述一下那个虫子 如何复现这个漏...
与此问题匹配的付费插件
根据问题关键词和标签相关性精选,助你更快交付。
正在加载付费插件推荐……
相关教程
关于同一主题的深入指南。
教程
Introducing Search on GJS.Market
GJS.Market now has one search across everything we publish — plugins, articles, community questions, guides, authors and services. Press ⌘K from any page.
教程
GJS.Market Is Now Available for India 🇮🇳
GJS.Market is expanding its global presence with a dedicated experience for developers, agencies, SaaS companies, and digital creators in India
教程
如何在2026年用 GrapesJS 构建AI驱动的页面构建器
我们构建GJSDocs的经验——从简单的AI文本生成到结构化、上下文感知的视觉编辑
浏览插件分类
直接跳转到市场上的插件分类页面。