#67062026年2月13日作者 saeedhbi3 个回答
GrapesJS版本 [x] 我确认使用最新版本的GrapesJS 你用的是什么浏览器？ 所有浏览器（Chrome、Safari、Firefox、Edge） 可复制演示链接 https://jsfiddle.net/saeedhbi/powxyjdq/3/ 描述一下那个虫子 如何复现这个漏洞？ 初始化 GrapesJS 编辑器 选择画布中的一个组件 快速删除组件（按删除键或使用删除命令） 样式管理器的去跳出更新回调在组件被销毁后执行 注意“类型错误：e.getRoot 不是函数” 预期的行为是什么？ 样式管理器应在尝试调用组件的方法前验证组件仍然有效。要么： 在处理前过滤掉损坏或无效的组件 在组件方法调用周围添加try-catch...
artf
和 https://github.com/GrapesJS/grapesjs/issues/6705 类似 我无法创建那种竞态条件（例如通过 API 选择和移除），在你的例子中是在组件上检查 getRoot，但组件 API 上没有这样的方法
saeedhbi
和 https://github.com/GrapesJS/grapesjs/issues/6705#issuecomment-3921025039 一样，问题出在我们外部库，使用 GrapesJS，因为遇到了类似 6705 问题的情况，我会关闭它。感谢你的评论。
GJS Helper
该TypeError: e.getRoot is not a function是GrapesJS风格管理器中已知的竞赛条件，尤其是在组件被快速选择后删除时。它发生是因为样式管理器的更新逻辑（去跳转后）试图访问在去跳跃函数执行时已被销毁或移除的组件的方法。 根本原因 去跳出的更新： GrapesJS风格管理器使用去跳出的函数来更新其UI（例如，选中组件或样式变更后，updateStyleView、updateTraitView）。这意味着事件（如选择）与更新逻辑实际执行之间存...
#67042026年2月13日作者 mehdimoslehi2 个回答
GrapesJS版本 [x] 我确认使用最新版本的GrapesJS 你用的是什么浏览器？ Chrome 版本 143.0.7499.193 可复制演示链接 https://app.rechat.com/dashboard/marketing/history/Letter?printCampaignId=28f0587d-8738-4fd6-8087-da3167f6d737&action=edit 描述一下那个虫子 如何复现这个漏洞？ 打开 Rechat Studio 编辑器，尝试加载/打开这个模板：https://app.rechat.com/dashboard/marketing/history/Letter?printCam...
artf
请提供一个独立且可复现的演示，原因看起来来自你的代码逻辑，而非核心
GJS Helper
GrapesJS编辑器在加载模板时会崩溃并出现TypeError: Cannot read properties of undefined (reading 'type')，原因是你试图加载的内容中HTML格式错误。具体来说，某些div元素有data-block属性但缺少data-type属性，这对GrapesJS正确识别和处理组件至关重要。 根本原因 GrapesJS解析你提供的HTML内容（通过editor.setComponents()或editor.load()）来...
#66902026年1月16日作者 HavokInspiration1 个回答
GrapesJS版本 [x] 我确认使用最新版本GrapesJS 你用的是什么浏览器？ Chrome 143.0.7499.193 可复制演示链接 https://grapesjs.com/demo.html 描述一下那个虫子 你好。 如何复现这个漏洞？ 导入 JS 文件 / Node env 中的 GrapeJS ： 在使用严格CSP规则的网页上，例如： 这样做会导致大量关于内联样式的CSP违规。 问题所在 我们正在考虑在SaaS产品的重大更新中使用GrapeJS，然而，我们面临着关于自由库和CSP规则的一个大问题。 我们的安全主管要求非常严格的CSP政策，而GrapeJS违反了这些政策。为了让GrapeJS与我们的基础规则正常...
GJS Helper
GrapesJS作为动态网页构建器，本质上依赖注入样式和操控 DOM，这确实可能导致内容安全政策（CSP）违规，尤其是在像你这样严格的规则下。让我们拆解这些问题并提出解决方案。 根本原因分析 <style>标签注入（style-src-elem违反）： GrapesJS动态创建<style>元素以注入 CSS 规则，例如编辑器界面、画布 iframe 的基础样式以及组件特定样式（尤其是在启用 forceClass 时）。如果这些动态创建的 <style> 标签没有 nonc...
#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是因为我的项目里总会有一个该组件的实例。我的用例是组件外部设计成作为“后台”，然后导入到使用该组件的项目中。因此，当外部组件更新时，我需要在项目中更新它，这也是我尝试重建它的原因，它可能会修改组件或样式。有没有办法强制刷新样式？
#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键分配错误。这意味着标...
#66752025年12月15日作者 lexoyo1 个回答
@artf 符号中带有ID的元素在不同实例中ID不同。这很合理，因为在 HTML 文档中出现多个元素同一个 ID 是不好的 第1期 在不同页面上使用符号的用户会感到困惑，因为他们“添加”到元素ID上的样式“丢失”了。你有没有想过在这个使用场景下有什么干净利落的解决办法？ 第2期 另一个有问题的用例是当我有一个符号多次出现，且内侧是它 一个带有 ID 的元素 对该ID的引用，例如“<label for=”the-id“>” 解决方案 然后它坏了，就没法让它正常工作了，对吧？不幸的是，我还有其他类似的使用场景。对于这些，我想我可以在我的“grapesjs-symbols”插件里实现一个变通方法（一个符号的封装器，带UI等），它会检测到...
GJS Helper
你准确地指出了 GrapesJS 中关于符号实例中ID处理的一个基本设计决策。这种行为虽然对维护有效HTML至关重要，但在样式和属性引用等特定用例中确实存在挑战。让我们来拆解一下问题和解决方案。 根本原因： GrapesJS的ID再生政策 GrapesJS 在每次符号实例化或复制时，有意为符号实例内的元素重新生成唯一 ID。这是有意设计的，旨在防止单个 HTML 文档中多个元素拥有相同的 ID。存在重复 ID 是无效的 HTML，可能导致浏览器、CSS 和 JavaScri...
#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 文档中，以管理组件选择并防止非意...
#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，而是“功能”。 😅 依我看，组件样式不应该绑定在符号上;这是覆盖同一符号之间样式的简单方法（很常见）。如果你需要相同的风格，你只需利用这些职业。