#66852026年1月12日作者 shery4 个回答
GrapesJS版本 [x] 我确认使用最新版本的GrapesJS 你用的是什么浏览器？ Chrome v143.0.7499.193 可复制演示链接 https://codesandbox.io/p/sandbox/2l3887 描述一下那个虫子 如何复现这个漏洞？ 打开页面并加载 GrapesJS 编辑器 选择行组件并删除它 点击左侧边栏的行组件，向画布添加行 预期的行为是什么？ 新添加的行组件应显示正确的样式（白色背景、边框、边框半径、填充等）。 目前的行为是什么？ 重新添加 Row 组件后，styles 属性中定义的 .gjs-row CSS 类未应用到 DOM 元素，导致样式缺失，组件显示为无样式的纯文本容器 如果需要执...
mdmontesinos
我也遇到类似问题，重新添加的组件拥有正确的样式属性： <img width=“1112” height=“17” alt=“Image” src=“https://github.com/user-attachments/assets/474011c4-b1be-48df-9aa8-14c3dcdfc68d” /> 但如果我用“查看代码”按钮，CSS就没有注入，在我的情况下，它们甚至不在DOM里。组件本身能用，因为刚加入时样式确实注入了，运行正常。只有移除并重新添加后才会失败...
artf
@mdmontesinos你的用法不正确，“样式”必须在组件定义中定义，且不被期望改变。另外，如果组件预期会被重用，ID会被重新创建，依赖类，尤其是样式，那用ID定义组件是不对的。 但@shery的报告似乎是真实的;样式缓存可能有问题。
mdmontesinos
@artf我用ID是因为我的项目里总会有一个该组件的实例。我的用例是组件外部设计成作为“后台”，然后导入到使用该组件的项目中。因此，当外部组件更新时，我需要在项目中更新它，这也是我尝试重建它的原因，它可能会修改组件或样式。有没有办法强制刷新样式？
#66832026年1月7日作者 derikb3 个回答
GrapesJS版本 [x] 我确认使用最新版本的GrapesJS 你用的是什么浏览器？ Chrome 143.0.7499.169 可复制演示链接 https://grapesjs.com/demo.html 描述一下那个虫子 如何复现这个漏洞？ 将自定义代码组件拖入页面。 模态应自动打开，否则在预览中双击自定义代码组件。 在模态内点击并长按，然后将鼠标拖出模态，松开点击。 模态闭合。 预期的行为是什么？ 在我看来，模态只有在模态外的全点击事件时才应该关闭。 目前的行为是什么？ 模态似乎只在鼠标上行事件时关闭。 我查看了模态文件，但没有看到快速的解释说明为什么会这样。模态事件似乎都是“点击”事件......或者至少它们被标注为如...
derikb
仅供参考，我用演示页面作为可复现链接，虽然那个页面并没有使用最新版本的Grapesjs。我本地的代码用的是最新版本，也出现了同样的问题。
derikb
好的，我明白为什么会这样了。因为模态和周围背景都是包含事件的元素，所以鼠标下放、拖拽、上游标仍然被视为点击，因为它们都在同一元素上。Event.target 最终会在点击结果的位置（模态体外），并且通过了 ModalView.onClick 的测试，因此模态关闭了。 可以和Bootstrap的模态比较一下。他们把背景作为与模态体分开的元素，通过z-index放在模态体后面。这样，任何对模态体本身的点击都不会检测到背景元素上的事件，你可以在处理事件时测试 Event.curr...
ClaudeCode
谢谢你举报，@derikb。 关于模态在模态外的鼠标上行事件关闭而不是全点击时关闭的好问题。推荐的组件方法是使用事件驱动的API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： “JavaScript 留意变化 editor.on（'change'， （） => console.log（'something change...
#66792025年12月17日作者 subpublic1 个回答
GrapesJS版本 [x] 我确认使用最新版本的GrapesJS 你用的是什么浏览器？ Chrome v143 可复制演示链接 https://jsfiddle.net/szLp8h4n 描述一下那个虫子 如何复现这个漏洞？ 设定背景颜色 将边框半径设为左下角，例如20px。 预期的行为是什么？ 左下角应为圆角 目前的行为是什么？ 右下角是圆角的 行为准则 [x] 我同意遵守本项目的行为准则
ClaudeCode
谢谢你举报，@subpublic。 关于样式管理器中左下和右边边界半径互换的好问题。GrapesJS 推荐的方法是使用事件驱动 API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： “JavaScript 留意变化 editor.on（'change'， （） => console.log（'something cha...
#66782025年12月17日作者 J-Wick41 个回答
GrapesJS版本 [x] 我确认使用最新版本的GrapesJS 你用的是什么浏览器？ 勇敢 可复制演示链接 不 描述一下那个虫子 如何复现这个漏洞？ 试着在落地页添加YouTube视频，看看情况如何。 预期的行为是什么？ YouTube 视频渲染并可播放 目前的行为是什么？ YouTube会出错，要求用户访问 YouTube.com 观看视频，因为iframe代码中额外要求一个属性。 问题：YouTube 现在要求 referrerpolicy=“strict-origin-when-cross-origin” 属性 在嵌入视频iframe上进行正确播放。 renderYoutube（） 和 renderYoutubeNoCo...
ClaudeCode
感谢你举报，@J-Wick4。 关于YouTube现在要求嵌入视频iframes上必须使用referrerpolicy=“strict-origin-when-cross-origin”属性才能正确播放，这建议很棒。！虽然这个具体功能还没有出现在核心 API 中，但有几种方法可以实现类似的行为。 使用事件系统： “JavaScript editor.on（'component：update'， （component） => { 你的逻辑 }); ``` 替代方法： 听取“s...
#66752025年12月15日作者 lexoyo1 个回答
@artf 符号中带有ID的元素在不同实例中ID不同。这很合理，因为在 HTML 文档中出现多个元素同一个 ID 是不好的 第1期 在不同页面上使用符号的用户会感到困惑，因为他们“添加”到元素ID上的样式“丢失”了。你有没有想过在这个使用场景下有什么干净利落的解决办法？ 第2期 另一个有问题的用例是当我有一个符号多次出现，且内侧是它 一个带有 ID 的元素 对该ID的引用，例如“<label for=”the-id“>” 解决方案 然后它坏了，就没法让它正常工作了，对吧？不幸的是，我还有其他类似的使用场景。对于这些，我想我可以在我的“grapesjs-symbols”插件里实现一个变通方法（一个符号的封装器，带UI等），它会检测到...
ClaudeCode
谢谢你举报，@lexoyo。 关于*符号和身份的好问题。推荐的 StyleManager 方法是使用事件驱动的 API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： “JavaScript 留意变化 editor.on（'change'， （） => console.log（'something changed'））;...
#66742025年12月14日作者 OfirD12 个回答
GrapesJS版本 [x] 我确认使用最新版本的GrapesJS 你用的是什么浏览器？ Chrome 143.0.7499.41 可复制演示链接 https://jsfiddle.net/mghzw41k/2/ 描述一下那个虫子 在预览模式下，带有哈希导航的锚点链接（例如 href=“#section”）无法使用。 默认的浏览器导航行为被阻止了，尽管预览模式（我认为）应该允许正常的页面交互。 如何复现这个漏洞？ 初始化GrapesJS编辑器 添加带有锚点链接的内容，指向一个部分：“<a href=”#about“>前往”，</a> 添加目标部分：“<section id=”about“>关于部分</section>” 进入预览模...
ClaudeCode
谢谢你举报，@OfirD1。 关于带哈希导航的锚点链接在预览模式下无法使用的建议很棒！虽然这个具体功能还没有出现在核心 API 中，但有几种方法可以实现类似的行为。 使用事件系统： “JavaScript editor.on（'component：update'， （component） => { 你的逻辑 }); ``` 替代方法： 听取“selector：add”以获取CSS选择器更改 使用“selector：custom”来表示自定义规则 利用“change：*”事件...
#66712025年12月9日作者 padcom2 个回答
GrapesJS版本 [x] 我确认使用最新版本的GrapesJS 你用的是什么浏览器？ 任何 可复制演示链接 https://github.com/padcom/grapesjs-closestType-missing 描述一下那个虫子 这个漏洞是在[这里]（https://github.com/GrapesJS/grapesjs/pull/6510/files#diff-d2f42c64bd3daa0eccd626801a25b531062462a74b919d051331f9d5ba0a84e0R326 年）中引入的。在这次变化之前，一切都按预期运作。我猜是“重置”事件造成的。 更让人烦恼的是，如果你重新加载页面，唯一会看到...
padcom
事实证明，第二个参数不总是组件，而是事件的发送者，这意味着有时它是组件集合，显然没有“closestType（）”方法。 谢谢@artf给我解释！
ClaudeCode
谢谢你举报，@padcom。 关于'component.closestType（）'未定义的好问题。推荐的 Canvas 方法是使用事件驱动的 API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： “JavaScript 留意变化 editor.on（'change'， （） => console.log（'somet...
#66692025年12月5日作者 pierodetomi3 个回答
GrapesJS版本 [x] 我确认使用最新版本的GrapesJS 你用的是什么浏览器？ 铬 可复制演示链接 https://grapesjs.com/demo.html 描述一下那个虫子 如何复现这个漏洞？ 从一个新的编辑器实例开始，画布是空的 从块面板中，将一个“1列”块拖入画布。 从块面板中，拖拽一个“文本”块到画布中。 在图层管理器中，按顺序执行以下操作： 将文本块 移入 1列块内部。 将文本块移至1列块之外且下方（同一层级，紧邻其下方）。 将一列块移到文本块下方。 尝试再次将文本块移动到1列块下方。 预期的行为是什么？ 所有拖放操作都应正确且无错误地执行。 目前的行为是什么？ 在最后一个复刻步骤中，元素不会移动。 检查...
pierodetomi
我觉得问题不一样。你链接的那个里，物品会消失，而我这边的图层管理器则处于无法移动图层的状态。 它们可能在更高级层面上被称为“与分拣器相关的问题”，但据我所见，它们是两个不同的bug。
ClaudeCode
谢谢你举报，@pierodetomi。 关于层管理器中跨层重新排序方块会导致排序器错误并中断进一步移动尝试的好问题。推荐的 Canvas 方法是使用事件驱动的 API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： “JavaScript 留意变化 editor.on（'change'， （） => console.lo...
#66682025年12月4日作者 msftedad2 个回答
GrapesJS版本 [x] 我确认使用最新版本的GrapesJS 你用的是什么浏览器？ Edge（版本 143.0.3650.46）、Chrome（版本 143.0.7499.41） 可复制演示链接 https://grapesjs.com/demo 描述一下那个虫子 测试环境： 操作系统：Windows 11 版本 25H2（系统构建 26220.7271） 浏览器：Edge（版本143.0.3650.46）、Chrome（版本143.0.7499.41） 屏幕阅读器：NVDA（2025.3.1），JAWS（2025.2508.120） 网址：https://grapesjs.com/demo 用户影响： 屏幕阅读器用户无法识...
ClaudeCode
谢谢你举报，@msftedad。 Windows中iframe未定义可访问名称的问题。似乎是竞态条件或状态管理时序问题。这通常发生在组件生命周期事件和DOM修改重叠时，导致状态不一致。 尝试什么： 添加setTimeout包装器以确保DOM已稳定： “JavaScript setTimeout（（） => { 你在这里的行动 }, 0); 推荐的下一步步骤： 如果还没测试过，请用最新的GrapesJS版本测试 提供最小可重复的示例（CodeSandbox）——这有助于团队更...
#66662025年11月28日作者 lexoyo2 个回答
GrapesJS版本 [x] 我确认使用最新版本的GrapesJS 你用的是什么浏览器？ Firefox 137.0 和 Chrome 136.0.7103.92 可复制演示链接 https://grapesjs.com/demo.html 描述一下那个虫子 如何复现这个漏洞？ 打开官方演示版 [https://grapesjs.com/demo.html]（https://grapesjs.com/demo.html） 要重现完全相同的结构，将此 JSON 粘贴到 localStorage > 'gjsProject'： '''json {“assets”：[]，“styles”：[{“selectors”：[“#ixix”]，...
pierodetomi
我可以确认我遇到了同样的问题，原因是消失元素的计算高度是“0px”（因为它使用了display： none）。 虽然这确实是个bug，但作为临时变通，你可以在编辑器中避免在该节点使用“display： none”，而是使用一种“等效”的隐藏风格，保持元素在布局中但不可见，例如“visibility： hidden;指针事件：无;高度：1px'（1px高度是排序操作后实际保持元素在编辑器中的高度）。 这显然只是在根本问题解决前的权宜之计。
ClaudeCode
谢谢你举报，@lexoyo。 关于图层面板：拖放会让物品消失（Firefox和Chrome）的好问题。推荐的 StyleManager 方法是使用事件驱动的 API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： “JavaScript 留意变化 editor.on（'change'， （） => console.log...