#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插件。显然，只有在加载一个项目时，且该项目在组件attributes上存在style属性时才会出现。每次在编辑器中做了一次更改后，style属性都会被扩展，old value会加上最新的值，项目的JSON会呈指数增长。 我尝试了不同版本的 grapesjs，从版本 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...
GJS Helper
看起来你在 GrapesJS遇到了一个bug，特别是在使用MJML组件并应用样式（如填充）时，导致生成和存储无效属性。这个问题似乎是回归，因为它在旧版本（0.22.2）中有效，但在新版本中失败。 根本原因分析 问题的核心在于 GrapesJS 如何序列化和反序列化组件属性，尤其是针对MJML元素。当你添加填充或其他样式时， GrapesJS 有时会错误地生成纯数字名称的属性（例如， 0="font-size:30px"， 1="font-size:30px"），覆盖在 mj...
#66292025年10月14日作者 paolotozzo1 个回答
GrapesJS版本 [x] 我确认使用最新版本的GrapesJS 你用的是什么浏览器？ Chrome 最新版本 可复制演示链接 https://app.grapesjs.com/studio 描述一下那个虫子 如何复现这个漏洞？ 初始化 GrapesJS 编辑器，使用默认设备配置 切换到平板或移动设备视图 添加文本块组件（或任何带有默认样式的组件，例如边距：10px） 切换回桌面视图 注意默认样式不会应用到桌面 预期的行为是什么？ 默认组件样式应始终应用于基础CSS规则（不使用媒体查询），无论编辑器当前选择的是哪种设备。 目前的行为是什么？ 默认样式应用于当前选择设备的媒体查询，导致： 在平板/移动端添加组件时，桌面缺少样式 在...
GJS Helper
你描述的问题是 GrapesJS v0.22.10+ 引入的一个已知行为变化，即当添加组件时，默认组件样式会错误地应用到设备特定媒体查询中，而非桌面设备视图正在激活。这导致样式在切换设备时消失或不一致。 根本原因 过去， GrapesJS 通常会将默认组件样式应用到基础CSS规则上（不使用任何媒体查询），确保它们是全局活跃的。设备特定的样式随后会作为覆盖添加。然而，在最近的版本中，当组件在编辑器中选择特定设备（例如平板、移动端）时， GrapesJS的内部样式处理似乎会隐式...
#66232025年10月10日作者 zhengtulymGh1 个回答
GrapesJS版本 [x] 我确认使用最新版本GrapesJS 你用的是什么浏览器？ 140.0.7339.214（正式版本） （x8664） 可复制演示链接 https://codesandbox.io/p/devbox/d27l6n 描述一下那个虫子 我想基于GrapesJS创建一个自定义的动态列表组件（默认为3行）。它可以绑定到数组变量，并根据数组长度动态改变容器中的行数。现在我遇到了冻结问题。重现步骤如下： 点击左侧的变量标签，创建一个长度为4的新数组变量。 [![请输入图片描述][1]][1] 回到组件标签，将动态列表容器组件拖到画布上。 选择你刚拖入的动态列表组件。右侧的样式标签页会显示一个下拉菜单，用于绑定数组变量...
GJS Helper
你在GrapesJS中遇到的自定义动态列表组件冻结的问题，是典型的事件反馈循环。这是因为负责更新行计数的事件监听器过于宽泛，导致它在无限循环中重新触发。 根本原因 你的editor.on('component:update:attributes', ...)监听器设计成在组件的任何属性被更新时做出反应。当你将数组变量绑定到动态列表组件时，其DLATTRARRAYVAR属性会发生变化，正确触发监听器并随后ensureRowCountByArray。 ensureRowCoun...
#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...
GJS Helper
你准确地发现了GrapesJS中keepEmptyTextNodes选项处理方式的差异，导致HTML输出中被剔除换行。这确实是与解析器配置及其TypeScript定义相关的bug。 根本原因 GrapesJS HTML 解析器（特别是 ParserHtml 模块）设计为直接从顶层 parser 配置对象读取 keepEmptyTextNodes 选项，而非从 parser.optionsHtml中读取。 当你初始化GrapesJS时，你提供的parser对象作为配置传递给内...
#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） 如果需要执行某些代码以重现该漏洞，请将其粘贴到下面： 行为准则 [x] 我同意遵守本项目的行为准则
GJS Helper
你遇到的问题是，尽管设置了panels: { defaults: [] }，“方块”面板仍然可见，这是一个常见的混淆点。panels: { defaults: [] }配置选项确实是为了防止GrapesJS初始化其核心默认面板（比如“图层”或“样式”面板）。 然而，“方块”面板通常是由grapesjs-blocks-basic插件添加的，该插件默认包含并启用GrapesJS。该插件会添加自己的面板和组件，独立于核心panels.defaults设置。因此，仅仅禁用默认面板并...
#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（{...
GJS Helper
你遇到的问题是因为内联样式变形导致GrapesJS冻结，这是个关键bug，源于编辑器内部CSS解析器处理无效语法，特别是未关闭的评论。 根本原因 问题在于你h3元素的 style属性：<h3 style="text-align: center; / margin-top: 20px;">Test</h3>。 在style属性中，你有一个未封闭的CSS注释：/ margin-top: 20px;。CSS注释必须明确关闭，*/。由于不关闭，GrapesJSCSS解析器（在添加或...
#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
GJS Helper
你遇到的问题是，在 GrapesJS中，用共享类调整元素大小会影响所有该类元素，这是 中已知的行为，源于它管理和应用 CSS 样式的方式。默认情况下，GrapesJS 通常会通过在类选择器下将样式分组来优化 CSS。当你调整组件大小时，GrapesJS可能会把这解读为关联类的样式变化，而不是对具体组件实例应用内联样式。 根本原因： 当组件大小被调整时，GrapesJS会更新其width和height属性。如果组件有一个或多个类，GrapesJS的内部样式管理逻辑可能会决定更...
#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 下次版本会修复
GJS Helper
你准确识别了GrapesJS中内联样式似乎完全覆盖基于ID的CSS规则，即使是对无冲突属性的属性。这确实偏离了标准CSS专一性规则，可以看作GrapesJS内部样式管理处理内联样式与ID选择器交互时的一个bug。 根本原因分析 在标准CSS中，特异性要求内联样式（style="..."）具有最高的特异性，其次是ID选择器（#id），然后是类选择器（.class），最后是元素选择器（tag）。当一个元素适用多条规则时，具有较高特异性的规则优先用于冲突属性，而低特异性规则中的非...
#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...
GJS Helper
你遇到的 GrapesJS问题，即反复快速创建和销毁编辑器导致 undefined 'allcomponents' 和 undefined 'lastcomponent'等错误，是异步操作或快速生命周期变更中竞赛条件和状态不一致的经典例子。这通常发生在新编辑器实例初始化时，而前一个实例仍在被销毁过程中，或者内部GrapesJS事件监听器或计划任务试图对部分或完全销毁的编辑器实例进行操作。 根本原因分析 editor.select(wrapper)与undefined 'al...