PageKit — 可自托管的 GrapesJS 建站工具,附完整源码。 获取抢先体验

问题 #5441💬 已回答提出于 2023年10月3日作者 padcom0 个反应

没有ID,显示没有样式但带有“script”的元素,导致脚本无法运行这些元素

快速解答作者 artf

问题源于'jsInHtml: false'的使用以及内部JS生成器的处理方式。 我会尽量在下一个版本里修复这个问题。

阅读下方完整回答 ↓

问题

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)

artf• 2023年10月8日

问题源于'jsInHtml: false'的使用以及内部JS生成器的处理方式。 我会尽量在下一个版本里修复这个问题。

GJS Helper• 2026年5月17日

你描述的问题是GrapesJS中已知的行为,涉及HTML序列化过程中组件ID的生成和优化。当自定义组件有script()函数但没有显式样式应用时,GrapesJS可能会在最终HTML输出中省略组件根元素中的id属性(由editor.getHtml()生成)。这是因为GrapesJS主要使用ID来引用组件以进行样式设计。如果没有样式,ID可能被认为内部GrapesJS操作中没有必要,从而省略。 这种遗漏会破坏依赖document.querySelectorAll('#<component-id>')来寻找和初始化组件的脚本。 根本原因 GrapesJS的内部逻辑用于生成和保存id属性,与其样式...

相关问答

通过相似的问题讨论继续研究。

与此问题匹配的付费插件

根据问题关键词和标签相关性精选,助你更快交付。

查看全部插件

正在加载付费插件推荐……

免费方案

在以下平台查看开源 GrapesJS 插件: GitHub 或在我们的免费目录中快速搜索。

浏览免费插件 →
高级方案

高级插件提供支持、定期更新和生产就绪的功能——为你节省数天的集成工作。

浏览高级插件 →

相关教程

关于同一主题的深入指南。

全部教程 →

浏览插件分类

直接跳转到市场上的插件分类页面。