#66462025年11月11日作者 soul-media3 个回答
GrapesJS版本 [x] 我确认使用最新版本的GrapesJS 你用的是什么浏览器？ Chrome 与 Firefox 可复制演示链接 描述一下那个虫子 如何复现这个漏洞？ Chrome 和 Firefox： 为图片/文本添加填充 有时会出现错误，有时不会发生。 https://github.com/user-attachments/assets/01270f08-974d-4898-bde0-83233f9258e0 目前的行为是什么？ 铬 错误如下：Uncaught InvalidCharacterError：未能在“Element”上执行“setAttribute”：“0”不是有效的属性名。 这是我添加填充前的文字样子。...
trebor94
我也遇到了同样的问题，同时也在用“grapesjs-mjml”插件。显然，只有在加载一个项目时才会发生，而该项目的“属性”上存在“样式”属性。每次在编辑器中做更改后，'style'属性都会被扩展，'旧值'会加上最近的值，项目的 JSON 呈指数增长。 我尝试过不同版本的葡萄，从'0.22.2'版本开始往上看。到了版本'0.22.6'时，这个问题开始出现，所以在'0.22.5'和'0.22.6'之间某个时候，这个bug应该被引入了。在之前的所有版本中，一切都按预期运行。 为了...
trebor94
很遗憾，我没能弄清楚在导出之前加载的项目数据时，'style'属性会在哪里、什么时候被添加到组件的'style'里。也许有人能找出问题的原因。 @soul-media：顺便说一句，给“mjml”组件补丁“init”方法作为变通方法似乎有效，并且阻止了“style”属性在项目数据导出时添加（即使加载了之前保存的项目）。这似乎即使在“0.22.14”版本下也能正常工作，JSON输出会和你截图右侧的差不多。 要修补该函数，可以使用 'grapesjs-mjml' pluginsO...
ClaudeCode
感谢@soul媒体的报道。 关于Javascript错误“当我想添加填充的好问题。推荐的 StyleManager 方法是使用事件驱动的 API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： “JavaScript 留意变化 editor.on（'change'， （） => console.log（'somethin...
#66292025年10月14日作者 paolotozzo1 个回答
GrapesJS版本 [x] 我确认使用最新版本的GrapesJS 你用的是什么浏览器？ Chrome 最新版本 可复制演示链接 https://app.grapesjs.com/studio 描述一下那个虫子 如何复现这个漏洞？ 初始化 GrapesJS 编辑器，使用默认设备配置 切换到平板或移动设备视图 添加文本块组件（或任何带有默认样式的组件，例如边距：10px） 切换回桌面视图 注意默认样式不会应用到桌面 预期的行为是什么？ 默认组件样式应始终应用于基础CSS规则（不使用媒体查询），无论编辑器当前选择的是哪种设备。 目前的行为是什么？ 默认样式应用于当前选择设备的媒体查询，导致： 在平板/移动端添加组件时，桌面缺少样式 在...
ClaudeCode
谢谢你举报，@paolotozzo。 关于 *v0.22.10+ 中默认组件样式错误应用到设备特定媒体查询的问题，真是个好问题。推荐的 StyleManager 方法是使用事件驱动的 API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： “JavaScript 留意变化 editor.on（'change'， （） =...
#66232025年10月10日作者 zhengtulymGh1 个回答
GrapesJS版本 [x] 我确认使用最新版本的GrapesJS 你用的是什么浏览器？ 140.0.7339.214（正式版本） （x8664） 可复制演示链接 https://codesandbox.io/p/devbox/d27l6n 描述一下那个虫子 我想基于GrapesJS创建一个自定义动态列表组件（默认为3行）。它可以绑定到数组变量，并根据数组长度动态改变容器中的行数。现在我遇到了冻结问题。复制步骤如下： 点击左侧的变量标签，创建一个长度为4的新数组变量。 [![请输入图片描述][1]][1] 回到组件标签，将动态列表容器组件拖到画布上。 选择你刚拖入的动态列表组件。右侧的样式标签页会显示一个下拉菜单，用于绑定数组变量...
ClaudeCode
谢谢你举报，@zhengtulymGh。 自定义动态列表在绑定数组并展开行以匹配长度后卡死的问题，似乎是竞态条件或状态管理时序问题。这通常发生在组件生命周期事件和DOM修改重叠时，导致状态不一致。 尝试什么： 添加setTimeout包装器以确保DOM已稳定： “JavaScript setTimeout（（） => { 你在这里的行动 }, 0); 推荐的下一步步骤： 如果还没测试过，请用最新的GrapesJS版本测试 提供最小可重复的示例（CodeSandbox）——这...
#65702025年7月20日作者 nanto1 个回答
GrapesJS版本 [x] 我确认使用最新版本的GrapesJS 你用的是什么浏览器？ Chrom v140.0.7307.0 （金丝雀） 可复制演示链接 https://jsfiddle.net/y3gr69s4/ 描述一下那个虫子 如何复现这个漏洞？ 创建编辑器实例，使用 'parser.optionsHtml.keepEmptyTextNodes' 选项集 'true'。 “''js const editor = Grapesjs.init（{ 解析器：{ optionsHtml： { keepEmptyTextNodes： true， }, }, }); 获取HTML代码。 “''js const result = ed...
ClaudeCode
谢谢你举报，@nanto。 关于解析器忽略“parser.optionsHtml.keepEmptyTextNodes”选项的好问题。推荐的 StyleManager 方法是使用事件驱动的 API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： “JavaScript 留意变化 editor.on（'change'， （...
#65492025年6月25日作者 yashvi20264 个回答
GrapesJS版本 [x] 我确认使用最新版本的GrapesJS 你用的是什么浏览器？ 铬 可复制演示链接 https://codepen.io/Harshsne/pen/YPXdgmj 描述一下那个虫子 如何复现这个漏洞？ 上传图片 将其切换为移动视图 调整图像大小 ![图片]（https://github.com/user-attachments/assets/99f43e87-39bd-488c-8d64-e13ed698d49f） 预期的行为是什么？ 在样式管理器中手动更改宽度和高度时，图片会被调整大小。 目前的行为是什么？ 无法调整图片大小 原因是在Canvas中调整图像大小时不会添加重要，所以原始样式不会被覆盖。 行...
mosh-tudor
@yashvi2026 那是因为你用了自定义的CSS代码。 去除这一部分： “''js 样式：'.image{最大宽度：100%;@media（最大宽度：480px） {.image {display： inline-block;高度：自动 ！重要;宽度：100% ！重要;最大宽度：100%;}}, `` 来自“编辑部”。BlockManager.add（'image'， {'
artf
我确认组件调整现在没考虑“重要”，但我大致会按照@mosh-tudor的建议来做。 你不需要去掉所有“样式”，我猜你需要的就是这个，但我觉得没必要把“！important”放在上面。如果你需要“！important”，问题很可能出在图像组件之外。
yashvi2026
我需要在风格中使用'！important'。 我注意到在其他组件中，当默认样式中包含“！important”时，通过样式管理器添加的样式也会包含“！important”，以确保它们覆盖默认样式。 ![图片]（https://github.com/user-attachments/assets/0ce9b9ce-86da-41d5-9795-50221d792bce） 所以，当在样式管理器中手动更改样式时，会添加 ！important。 同样地，调整组件大小时，样式也应该加上...
#65432025年6月15日作者 Zedonboy1 个回答
GrapesJS版本 [x] 我确认使用最新版本的GrapesJS 你用的是什么浏览器？ 镀铬 可复制演示链接 没有 描述一下那个虫子 如何复现这个漏洞？ 来自教程 我的CSS风格 预期的行为是什么？ 一块空白画布 目前的行为是什么？ ... ![图片]（https://github.com/user-attachments/assets/254211eb-876a-496c-b392-48543947df22） 如果需要执行某些代码以重现该漏洞，请将其粘贴到下面： “''js 你的代码在这里 ``` 行为准则 [x] 我同意遵守本项目的行为准则
ClaudeCode
谢谢你举报，@Zedonboy。 关于面板未拆除的好问题。推荐的 StyleManager 方法是使用事件驱动的 API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： “JavaScript 留意变化 editor.on（'change'， （） => console.log（'something changed'））...
#65272025年5月22日作者 tim-prom2 个回答
GrapesJS版本 [x] 我确认使用最新版本的GrapesJS 你用的是什么浏览器？ Firefox 138.0.4 可复制演示链接 https://codesandbox.io/p/sandbox/exciting-lalande-98d5vw 描述一下那个虫子 如何复现这个漏洞？ 添加带有内联样式错误组件的页面 编辑器无法加载，整个页面变得无响应。Firefox显示“此页面正在使Firefox变慢”警告 预期的行为是什么？ 如果编辑器无法解析CSS，最好在控制台里记录错误，而不是屏蔽整个应用 目前的行为是什么？ 编辑器变得无响应 如果需要执行某些代码以重现该漏洞，请将其粘贴到下面： “''js 编辑。Pages.add（{...
ClaudeCode
谢谢你举报，@tim-prom。 关于排外样式畸形导致编辑器冻结的好问题。推荐的 StyleManager 方法是使用事件驱动的 API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： “JavaScript 留意变化 editor.on（'change'， （） => console.log（'something ch...
#65152025年5月13日作者 jsxOverdose2 个回答
GrapesJS版本 [x] 我确认使用最新版本的GrapesJS 你用的是什么浏览器？ Chrome 136.0.7103.93 可复制演示链接 https://jsfiddle.net/L4pu0tzc/ 描述一下那个虫子 如何复现这个漏洞？ 向编辑器添加多个图像元素。 为每张图像赋予相同的类名（例如，class=“shared-class”）。 选择并调整其中一张图片的大小。 预期的行为是什么？ 只有选定的图片应该被调整大小，无论共享的类名或其他属性如何。 目前的行为是什么？ 所有同类元素都会同时调整大小，即使只选中一个。 系统似乎在设置样式时优先考虑类名而非 ID，导致无意中出现全局样式更改。 行为准则 [x] 我同意遵守...
artf
确保开启此选项：https://grapesjs.com/docs/modules/Selectors.html#component-first-selectors
ClaudeCode
谢谢你举报，@jsxOverdose。 关于调整元素大小会影响所有同类元素的好问题。推荐的 StyleManager 方法是使用事件驱动的 API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： “JavaScript 留意变化 editor.on（'change'， （） => console.log（'somethi...
#65022025年4月25日作者 jsxOverdose2 个回答
GrapesJS版本 [x] 我确认使用最新版本的GrapesJS 你用的是什么浏览器？ Chrome v135.0.7049.96 可复制演示链接 https://jsfiddle.net/bqkLwt8j/ 描述一下那个虫子 当元素具有内联样式且匹配基于ID的CSS规则时，ID选择器的样式会被移除——即使内联样式不会覆盖这些属性。然而，基于类的 CSS 规则不会出现这个问题，因为它们的行为符合预期。 如何复现这个漏洞？ 为特定ID添加CSS规则，例如“#frame2 { color： red; }` 添加带有该ID和内联样式的元素，例如'<div id=“frame” style=“font-size： 14px;”>'” 注...
artf
谢谢你的报告@jsxOverdose 下次版本会修复
ClaudeCode
谢谢你举报，@jsxOverdose。 关于内联风格覆盖基于ID的CSS规则，这是个很好的问题。推荐的 StyleManager 方法是使用事件驱动的 API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： “JavaScript 留意变化 editor.on（'change'， （） => console.log（'s...
#64942025年4月15日作者 yashvi20261 个回答
GrapesJS版本 [x] 我确认使用最新版本的GrapesJS 你用的是什么浏览器？ 铬 可复制演示链接 https://codepen.io/Harshsne/pen/QwwLjBQ 描述一下那个虫子 如何复现这个漏洞？ 点击创建，然后快速且反复地摧毁。 调试时，我发现错误由以下代码引起： 未定义的“allcomponents”错误由：（editor.select 代码）引起。 未定义的“最后组件”错误： 将样式添加到组件会触发 stylable：change 事件，如果你的侧面函数仍在运行并且在此期间点击 Destroy，会报错。 ![图片]（https://github.com/user-attachments/asse...
ClaudeCode
谢谢你举报，@yashvi2026。 关于创建并摧毁反复出现错误的好问题。推荐的 StyleManager 方法是使用事件驱动的 API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： “JavaScript 留意变化 editor.on（'change'， （） => console.log（'something ch...