#57202024年3月6日作者 bernesto2 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Chrome v122 可复制演示链接 https://jsfiddle.net/n38vbktg/ 描述一下那个虫子 如何复现这个漏洞？创建一个组件，传播包含可分层=true的默认值。 在“有能力”下引入一条评论。 预期的行为是什么？ 评论要么保持隐藏，要么不会导致错误。 目前的行为是什么？ 编辑器将该注释视为 HTMLElement。当编辑器尝试从节点读取不存在的属性（如 getComputedStyle 或 getClientRects）时，会触发多个错误。这两种方法都应先进行检查。或者——应为注释引入一个新类型，覆盖从父节点传播的默...
GJS Helper
这是一个有效的错误报告。问题出在GrapesJS的组件系统，尤其是传播layerable: true时，试图将HTML注释节点当作标准HTML元素来处理。这会导致在HTMLElements上调用特定于s的方法，如getComputedStyle或getClientRects时，Comment节点上出现错误。 根本原因 当组件默认中有layerable: true（或继承）时，GrapesJS期望其子节点在图层面板中可渲染。在解析DOM时，GrapesJS遍历所有子节点Nod...
#57182024年3月4日作者 mitcht2 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Chrome 版本 122.0.6261.95（官方版本）（64 位） 可复制演示链接 https://jsfiddle.net/n4x6L1v0/2/ 描述一下那个虫子 如何复现这个漏洞？保存早期版本 grapejs （0.18）的组件数据尝试将 grapesjs 作为项目数据导入到最新版本 预期的行为是什么？ Grapes 可以简单地替换旧的“textnode”条目，并更新为“封装”式。 目前的行为是什么？ 控制台会触发偏移错误 这段代码并非重现该漏洞的必要条件，但它目前让我能够绕过这个问题。 这里附上了我现有 grapesjs 拖动文...
artf
谢谢@mitcht，但正如我之前提到的，主组件根本不可能是 textnode，所以在核心处理这种情况或开启这个问题都没有意义。 总之，如果逻辑对你有效，就直接在编辑器里用它。
GJS Helper
你遇到的问题是一个已知的破坏性变更，涉及GrapesJS内部组件架构的演进，特别是帧根组件的处理方式。在旧版本（比如0.18）中，帧的默认根组件类型可能是textnode或类似，而在最近版本中，它已被标准化为wrapper。 根本原因 GrapesJS 经历了大规模重构，以提升其核心组件模型、渲染和操作能力。作为这些变化的一部分，wrapper 组件被引入为一个特殊的、不可渲染的容器，作为GrapesJS帧内所有内容的根元素。该wrapper组件对编辑器的内部逻辑至关重要，...
#57152024年3月4日作者 afrinxnahar1 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Firefox 版本 123.0（64 位） 可复制演示链接 不在 描述一下那个虫子 我猜大多数.js文件都已经变成打字稿了，但可能还有像下面这个那样的坏链接...... ![GJS3]（https://github.com/GrapesJS/grapesjs/资产/125039325/A42D8156-13e5-4ba0-9cd5-6249ded1d75a）行为准则 [X] 我同意遵守本项目的行为准则
GJS Helper
感谢你在GrapesJS API文档中报告了这个坏链。你已经正确识别了根本原因。 根本原因 GrapesJS项目正在经历从JavaScript向TypeScript的重大迁移。作为这一过程的一部分，许多.js源文件被重命名为.ts或.tsx文件。你提供的链接https://github.com/GrapesJS/grapesjs/blob/dev/src/editor/model/Editor.js指向一个在dev分支上该路径和扩展名下已不存在的文件。 解决方案/变通方法...
#57082024年2月27日作者 ravisaxena2 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Chrome最新 可复制演示链接 我们现在运行在本地机器上 描述一下那个虫子 你好，目前 grapesjs 提供了内置属性，比如margin、padding，允许用户逐项更改每个属性（margin-top、margin-bottom等）。 如果能同时更改所有这些属性会更好。比如有锁定按钮，启用后会自动同时更改所有属性，而不是一个个更改。 行为准则 [X] 我同意遵守本项目的行为准则
artf
请避免在未阅读模板中漏洞问题的具体目的前打开BUG问题。
GJS Helper
这是提升 GrapesJS 样式体验的绝佳建议！默认情况下， GrapesJS的样式管理器提供对 CSS 属性如 margin 和 padding的细致控制，允许你单独调整每一侧（上、右、下、左）。虽然没有内置的“锁定”按钮来链接这些属性，但你可以通过创建自定义属性类型实现将所有侧面合并的功能。 这个自定义属性将作为“简写”控件。当你修改它的值时，它会自动更新所选组件上的四个单独边距或填充属性（例如， margin-top、 margin-right、 margin-bot...
#57052024年2月26日作者 bernesto4 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Chrome v122 可复制演示链接 https://jsfiddle.net/Lk2bwhp4/ 描述一下那个虫子 如何复现这个漏洞？将编辑器放入容器中，然后通过程序调整容器的宽度。 预期的行为是什么？ 编辑器及其所有子节点应相应调整大小。 目前的行为是什么？ 编辑器中所有组件的画布位置都保留了画布调整前的偏移。 注意，窗口调整大小会重置位置。这必须在窗口内通过程序实现。用例包括编辑器在页面上，有其他面板可以调整编辑空间大小。在下面的示例中，查看在将编辑器调整到更大宽度后，工具如何与相关元素对齐。工具保持在原来的位置，直到某个事件触发更...
artf
感谢@bernesto报告，但由于我们无法检测程序布局的变化而不影响性能，在这种情况下，你必须通过 ['editor.refresh（）]]（https://grapesjs.com/docs/api/editor.html#refresh） 手动更新编辑器布局（例如，在你的例子中，调用直接放在 resizeEditor 函数的末尾）
bernesto
你好，@artf，我其实不小心把这个混在你最后接受的拉取请求里（src/canvas/model/Frame.ts）。你可以看看我添加的内容，看看是否造成了问题。我们现在正在测试中，没有看到性能下降，而且它解决了问题。
artf
我其实把这个误混在你上次接受的拉取请求里了 我实际上删掉了，因为看起来没什么关系 🤣 补充回来没问题，但要考虑你的例子只有桌面设备才会有效。宽度填充了容器，这会触发iframe窗口的缩小（然后触发新增事件）。如果你换成更小的设备，这个方法就不行了，那时不会触发调整大小事件，所以你仍然需要刷新调用。
#57032024年2月25日作者 bernesto1 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Chrome v122 可复制演示链接 https://jsfiddle.net/v4e5d90z/ 描述一下那个虫子 如何复现这个漏洞？将编辑器放入任意容器中。 预期的行为是什么？ 颜色选择器应该相对于打开该选项的输入显示。 目前的行为是什么？ 选择器相对于窗口，而不是编辑器容器。这导致选择器的开启偏移量是所有偏移父容器累计偏移量。 行为准则 [X] 我同意遵守本项目的行为准则
GJS Helper
你遇到的GrapesJS颜色选择器偏移出现的问题，是第三方弹出组件（如颜色选择器、工具提示或下拉菜单）如何处理其位置的常见问题，尤其是在主应用容器本身偏移或定位时。在GrapesJS中，颜色选择功能通常由spectrum-colorpicker库驱动。 根本原因 默认情况下，spectrum-colorpicker库会直接将其选择器元素附加到document.body。当元素被附加到document.body并完全定位时，其top和left坐标相对于视口计算。库尝试根据触发...
#57002024年2月24日作者 upadhyay88442 个回答
GrapesJS 版本[X] 我确认使用最新版本 GrapesJS你用的是什么浏览器？ 镀铬可复制演示链接 无法提供数据敏感描述一下那个虫子 如何复现这个漏洞？在编辑器/Canvas中放置一页。将高度设定为ex-600pt，并且四边各加10pt的缓冲。现在在页面内放置两个部分。将最小高度设为某一部分，比如30点，高度为另一部分。现在，100%高度的部分与页面/父页面重叠 预期的行为是什么？ 该部分不应与页面重叠，只应覆盖父页面的可用空间，包括填充边距等。 目前的行为是什么？ ...它在页面上重叠 如果需要执行某些代码以重现该漏洞，请将其粘贴到下面： 行为准则[X] 我同意遵守本项目的行为准则
upadhyay8844
@artf你能帮我看看吗？
GJS Helper
你遇到的问题是，当父部分有固定高度和填充时，子部分与父height: 100%部分重叠，且有其他兄弟节点存在，这是常见的CSS布局挑战。这不是GrapesJS本身的bug，而是CSS中默认表现height: 100%导致的，尤其是与标准盒模型结合时。 根本原因解释 当你在区块级元素上设置height: 100%时，它会尝试占用其父元素内容区域高度的100%。它不会自动考虑： 父级填充： 如果父节点有 padding，子节点的height: 100% 仍会针对内容区域计算，而...
#56912024年2月21日作者 codei202 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Firefox 122.0.1 可复制演示链接 https://grapesjs.com/demo-mjml.html 描述一下那个虫子 如何复现这个漏洞？ 官方演示版：https://grapesjs.com/demo-mjml.html在画布上添加一列选择章节进入装饰区，在颜色选择器中选择背景色（注意：不要点击确定按钮）。步骤3后，点击撤销按钮，但不要点击其他地方。 预期的行为是什么？点击撤销按钮后，背景颜色应恢复到之前的颜色 目前的行为是什么？背景色保持不变。 同样的行为也出现在文字颜色上。行为准则 [X] 我同意遵守本项目的行为准则
artf
这大概和mjml插件有关，不是核心，因为我无法复现它（建议你打开相关仓库的问题）。
GJSBlock
谢谢你举报，@codei20。 关于在通过颜色选择器切换背景或文本颜色时取消功能的问题非常好。推荐的 Canvas 方法是使用事件驱动的 API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： “JavaScript 留意变化 editor.on（'change'， （） => console.log（'somethin...
#56892024年2月20日作者 mitcht4 个回答
GrapesJS 版本[X] 我确认使用最新版本 GrapesJS你用的是什么浏览器？ Chrome 版本 121.0.6167.185（官方构建）（64 位）可复制演示链接 https://jsfiddle.net/ja50kzne/4/描述一下那个虫子 如何复现这个漏洞？我有一个来自之前版本 grapesJS 的网页，加载时可以正确加载到 grapes 。你可以在小提琴中看到这一点。最新版本的 GrapesJS “创建”了小提琴中看到的JSON。我没有操作它。注意 grapesJS 加载，控制台没有错误。 执行 editor.getHtml（用于数据库存储）时，我看到 <> 引入了一个空元素注意console.log 预期的行...
mitcht
我把json删减了不少，发现输出中可能有一些可能无效的JSON？ 就像是“逃脱双引号”的引入有点不对劲。 JSON.stringify 和 JSON.parse 似乎不在意它，但肯定有问题。
artf
页面的根组件应该是一个“封装器”，在你的情况下是“textnode”（例如，这可能会破坏很多东西），其中有一个空的“tagName”（这就是“<>”的原因），并且不知为何是“content： ”undefined“（？） <img width=“377” alt=“截图 2024-02-22 00 44 33” src=“https://github.com/GrapesJS/grapesjs/assets/11614725/0e76b02e-097b-463f-a921-...
mitcht
这是 Grapes 0.18.4版本中发布的内容，因此是由 grapes生成的。我预计如果内容是“未定义”的， grapes 要么会删掉，要么忽略。目前我只是在自己这边删掉<>，但我想和你分享一下。
#56832024年2月15日作者 JonathanRiche2 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ 克罗姆V121 可复制演示链接 https://grapesjs.com/demo.html 描述一下那个虫子 如何复现这个漏洞？进入 graepesjs.com/demo 页面，打开控制台，使用全局编辑器对象 运行editor.runCommand（'sw-visibility'）方法——内置网格线 而且即使面板上设置了命令，命令也运行不了，我在项目里设置过这个，最近从0.20.3升级到最新的v0.21.8，发现editor.runCommand（'sw-visibility'，{force：true}）也无法使用，但还是没用 预期的行为...
JonathanRiche
首先需要运行visualEditor.stopCommand（'sw-visibility'），不确定这是不是新用来切换的runCommand，之前需要运行停止
GJS Helper
感谢你报告这个问题。我调查了最新GrapesJS演示页面（https://grapesjs.com/demo.html）上的editor.runCommand('sw-visibility')行为，发现该命令确实按预期工作。在浏览器控制台执行时，它成功切换了画布上的网格线。 GrapesJS演示页面（Chrome v121）上的验证: 前往https://grapesjs.com/demo.html。 打开浏览器的开发者控制台（F12）。 输入editor.runComma...