#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...
GJS Helper
谢谢你举报，@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] 我同意遵守本项目的行为准则
GJS Helper
感谢你报告这个问题。我可以确认GrapesJS风格管理器中“左下边框半径”和“右下边框半径”这两个控件确实互换了，导致错误的角落被圆角化。这影响GrapesJS0.21.1版本，以及使用默认样式管理器配置的其他版本。 根本原因 根本原因在于GrapesJS样式管理器的默认配置，特别是在“边界”扇区的“边界半径”属性组中。border-bottom-left-radius和border-bottom-right-radius的各个子属性的property键分配错误。这意味着标...
#66782025年12月17日作者 J-Wick41 个回答
GrapesJS版本 [x] 我确认使用最新版本的GrapesJS 你用的是什么浏览器？ 勇敢 可复制演示链接 不 描述一下那个虫子 如何复现这个漏洞？ 试着在落地页添加YouTube视频，看看情况如何。 预期的行为是什么？ YouTube 视频渲染并可播放 目前的行为是什么？ YouTube会出错，要求用户访问 YouTube.com 观看视频，因为iframe代码中额外要求一个属性。 问题：YouTube 现在要求 referrerpolicy=“strict-origin-when-cross-origin” 属性 在嵌入视频iframe上进行正确播放。 renderYoutube（） 和 renderYoutubeNoCo...
GJS Helper
这确实是一个有效的bug报告。YouTube已经更新了嵌入要求，如果iframe上没有referrerpolicy="strict-origin-when-cross-origin"属性，视频可能会无法播放，出现错误或需要用户直接访问 YouTube.com。GrapesJS核心对YouTube嵌入的ComponentVideoView缺少了这一关键属性。 根本原因 GrapesJS中的ComponentVideoView，特别是 renderYoutube() 和 ren...
#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>” 进入预览模...
GJS Helper
你遇到的锚点链接（哈希导航）在GrapesJS预览模式下无法正常工作的问题，是GrapesJS在画布内处理交互时常见的现象。在编辑模式下，GrapesJS会拦截元素上的点击事件，尤其是链接，以防止导航，转而允许选择和操作组件。虽然这对编辑器功能至关重要，但这种事件预防有时会持续存在，甚至干扰浏览器的原生行为，即使编辑器处于预览模式，理想情况下正常页面交互应被启用。 根本原因： GrapesJS 将事件监听器附加到 canvas iframe 文档中，以管理组件选择并防止非意...
#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给我解释！
GJS Helper
看起来关于component.closestType()的使用可能存在一些误解。在查看你提供的复制步骤和代码后，component.closestType确实是传递给component:update:components事件的component对象上的函数。你观察到的undefined值是调用component.closestType()时的返回值，且没有任何参数。 根本原因解释 GrapesJS 中的 closestType(type) 方法旨在遍历组件的父层级，找到与指...
#66692025年12月5日作者 pierodetomi3 个回答
GrapesJS版本 [x] 我确认使用最新版本的GrapesJS 你用的是什么浏览器？ 铬 可复制演示链接 https://grapesjs.com/demo.html 描述一下那个虫子 如何复现这个漏洞？ 从一个新的编辑器实例开始，画布是空的 从块面板中，将一个“1列”块拖入画布。 从块面板中，拖拽一个“文本”块到画布中。 在图层管理器中，按顺序执行以下操作： 将文本块 移入 1列块内部。 将文本块移至1列块之外且下方（同一层级，紧邻其下方）。 将一列块移到文本块下方。 尝试再次将文本块移动到1列块下方。 预期的行为是什么？ 所有拖放操作都应正确且无错误地执行。 目前的行为是什么？ 在最后一个复刻步骤中，元素不会移动。 检查...
pierodetomi
我觉得问题不一样。你链接的那个里，物品会消失，而我这边的图层管理器则处于无法移动图层的状态。 它们可能在更高级层面上被称为“与分拣器相关的问题”，但据我所见，它们是两个不同的bug。
GJS Helper
这是GrapesJS中已知的问题，涉及内部排序器实例（在图层管理器和画布中用于拖放）在复杂的跨层组件重排序操作后如何保持状态。你看到的错误Cannot read properties of null (reading 'contains')和 Cannot read properties of null (reading 'remove')表明排序器对 DOM 元素或其父容器的内部引用已过时或无效。 根本原因 当你执行一系列涉及更改元素父节点的移动（例如，将一个块移入另一个...
#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 用户影响： 屏幕阅读器用户无法识...
GJS Helper
这是一个合理的无障碍问题。GrapesJS编辑器的画布被渲染在一个<iframe>元素中。为了让屏幕阅读器正确识别并宣布该iframe的目的，它需要一个可访问的名称，通常由title属性或aria-label提供。 根本原因： 默认情况下，GrapesJS不会自动为主编辑器 iframe 分配 title 或 aria-label 属性。虽然 iframe 的内容（可编辑页面）可能有自己的标题，但 iframe 容器本身需要一个描述性名称，以便辅助技术告知用户其在页面中的角...
#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高度是排序操作后实际保持元素在编辑器中的高度）。 这显然只是在根本问题解决前的权宜之计。
GJS Helper
这确实是GrapesJS图层面板拖放功能中的一个bug，特别是在尝试移动语义关联的组件时，比如带有id的input元素和带有for属性的label元素引用该id。该问题在官方GrapesJS演示中是可复现的。 观察到的行为 将“复选框”组件（带有id="check"的input）拖到“Logo”组件下方时： “复选框”组件未能移动，在图层面板和画布上都保持在原位。 “按钮”组件（带有for="check"的label）意外地完全从画布和图层面板中消失，表明它正在Grapes...
#66632025年11月26日作者 lexoyo4 个回答
这里有一段展示这个bug的视频： https://github.com/user-attachments/assets/0fdc76ed-cee5-4481-98b1-cbbf52572b31 GrapesJS版本 [x] 我确认使用最新版本的GrapesJS 你用的是什么浏览器？ Firefox 最新版和 Chrome v141.0.7390.122 可复制演示链接 https://canary.silex.me/ 如果需要，我可以用小提琴或代码笔，或者你也可以用 https://canary.silex.me 复刻（你需要 gitlab.com 账号），不需要设置，bug会立即复制 甚至更简单，不用 gitlab.com 账号...
lexoyo
哦，如果你告诉我应该重点解决什么方案（比如重新连接实例的命令、像我在 silex 里做的那样用异步方法加载项目数据，我很乐意贡献......） CC @artf
artf
是的，看起来是这种加载🤔页面方式的问题 我这边（满载项目）没看到什么问题。为什么要用这种方式加载页面？
lexoyo
是的，看起来这种加载🤔方式确实有问题，我这边（满载项目）没看到问题。为什么要用这种方式加载页面？ 这样可以避免主线程被阻塞太久。当用户加载真实网站时，通常会显示脚本冻结浏览器的警告。还是说有我不知道的机制可以加载这些网站？
#66592025年11月25日作者 NilLlisterri4 个回答
GrapesJS版本 [x] 我确认使用最新版本的GrapesJS 你用的是什么浏览器？ Firefox 145.0（64位） 可复制演示链接 https://jsfiddle.net/arturarseniev/ta19s6go/ 描述一下那个虫子 如何复现这个漏洞？ 进入官方的[Symbols演示]（https://jsfiddle.net/arturarseniev/ta19s6go/），创建一个符号并更改主符号的文字颜色。实例符号不会更新。 预期的行为是什么？ 符号样式应更新，如[公关视频]（https://github.com/GrapesJS/grapesjs/pull/3165）所示。 目前的行为是什么？ 样式不会更...
NilLlisterri
明白了，如果我想在符号里样式并分享更改，我应该给它添加类。 谢谢你们的帮助！
lexoyo
你好 这个颜色被应用到元素上，在 Grapesjs 中，这意味着它会生成一个 CSS，比如 '#compid { color： red; }但 ID 在 HTML 页面中是唯一的，因此另一个符号的 ID 不同 这对我来说也是个问题，我不确定该怎么处理......也许@artf有点想法
artf
抱歉，这不是bug，而是“功能”。 😅 依我看，组件样式不应该绑定在符号上;这是覆盖同一符号之间样式的简单方法（很常见）。如果你需要相同的风格，你只需利用这些职业。