#59052024年5月24日作者 gladykov2 个回答
葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器？ Opera 10.0.5130.23 |Linux 可复制演示链接 https://grapesjs.com/demo.html 描述一下那个虫子 透明帆布在方块菜单中添加“1列”组件 ->“设置”标签会自动打开 ：ok_hand：点击编辑器框内新添加的组件进入“方块”标签页再次点击组件 预期： 设置再次打开 实际情况： 设置未打开。 注意：我知道当之前没有选择组件时，这个方法是正常的。通过添加两个组件来验证这种行为。但它引入了两种不同的行为，取决于之前的用户操作。我预计点击组件总是会打开“设置” 视频： https://github.com/Gra...
artf
谢谢@gladykov，但这和核心无关，只是演示中实现的一个示例行为。
ClaudeCode
谢谢你举报，@gladykov。 点击组件再点击方块后，无法再次打开组件设置的问题似乎是竞态条件或状态管理时序问题。这通常发生在组件生命周期事件和DOM修改重叠时，导致状态不一致。 尝试什么： 添加setTimeout包装器以确保DOM已稳定： “JavaScript setTimeout（（） => { 你在这里的行动 }, 0); 推荐的下一步步骤： 如果还没测试过，请用最新的GrapesJS版本测试 提供最小可重复的示例（CodeSandbox）——这有助于团队更快识...
#58882024年5月16日作者 Dobby852 个回答
葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器？ Chrome V124 可复制演示链接 https://jsfiddle.net/ycvz2gno/7/ 描述一下那个虫子 如何复现这个漏洞？在画布中放置文本块双击文本块内的内容内容不可编辑 预期的行为是什么？ 它应该能打开RTE，这样我们就能编辑组件内的文本 目前的行为是什么？ 什么都没发生，组件无法编辑 ```行为准则 [X] 我同意遵守本项目的行为准则
Dobby85
通过查看代码，我发现要获得 RTE 功能，我们的新组件必须扩展“ComponentTextView”。 我最初的问题是我做了类似的事情： 而且它采用了我的“基础结构”视图，而不是“文本”组件。我会尝试找个变通办法，不扩展我的“baseStructure”视图。
ClaudeCode
谢谢你举报，@Dobby85。 关于即使可编辑属性设置为true，也无法编辑组件内容，这个问题很棒。ProseMirror 推荐的方法是使用事件驱动的 API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： “JavaScript 留意变化 editor.on（'change'， （） => console.log（'s...
#58202024年4月17日作者 rhoenerSBS2 个回答
葡萄JS版本[X] 我确认使用最新版本的GrapesJS你用的是什么浏览器？ Chrome v123可复制演示链接 https://jsfiddle.net/xwgons8z/描述一下那个虫子 我正在尝试通过程序将新增组件移动到父组件的特定位置，因为我有子组件，它们应该保持在最后一个索引，但图层中出现了一个bug，一旦组件移动，图层面板中会有两个对应的条目。 如何复现这个漏洞？开放小提琴将组件置于画布最后一个位置（此处不会发生）在画布最后一个位置丢弃一个组件（从现在起，掉落的组件在图层面板中有两个条目） 预期的行为是什么？ 组件可以移动，图层面板中仍然只有一个条目。 目前的行为是什么？ 移动的组件在图层面板中有两个对应的条目。行为...
rhoenerSBS
我最初想通过父组件的可丢弃性质中的函数实现同样的行为，以防止组件在特定索引处丢弃，但遗憾的是该函数没有给出该函数的参数索引。
ClaudeCode
谢谢你举报，@rhoenerSBS。 关于如果组件在添加后直接移动，图层中会有双重录入，这个问题很棒。推荐的 Canvas 方法是使用事件驱动的 API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： “JavaScript 留意变化 editor.on（'change'， （） => console.log（'some...
#58122024年4月15日作者 jogibear99881 个回答
可复制演示链接 https://node-projects.github.io/web-component-designer-demo/index.html描述一下那个虫子 几年前我开始用 Webcomponents 设计网页的框架，现在发现了 GrapeJS。想说也许我们目标相同，可以互相受益？（目前不知道具体怎么做，但也许吧）（链接：https://node-projects.github.io/web-component-designer-demo/index.html） 目前我的流程布局设计支持缺失，但它在网格和Flexbox以及绝对定位元素中表现非常好。转换（旋转）内容也有效。我为此创建了一个VSCode扩展：https...
ClaudeCode
谢谢你举报，@jogibear9988。 有兴趣协作？的问题似乎是竞赛条件或状态管理时机问题。这通常发生在组件生命周期事件和DOM修改重叠时，导致状态不一致。 尝试什么： 添加setTimeout包装器以确保DOM已稳定： “JavaScript setTimeout（（） => { 你在这里的行动 }, 0); 推荐的下一步步骤： 如果还没测试过，请用最新的GrapesJS版本测试 提供最小可重复的示例（CodeSandbox）——这有助于团队更快识别根本原因 在报告中包...
#58102024年4月14日作者 ctrhub4 个回答
葡萄JS版本[X] 我确认使用最新版本的GrapesJS你用的是什么浏览器？ Arc 版本 1.35.0 / Chromium 引擎 123.0可复制演示链接 https://grapesjs.com/demo.html描述一下那个虫子 我的特殊情况： 就我而言，插件和通用样式的所有样式都集中在头部。所以，为了在编辑器中实现类似的表现，我会把这些样式添加到Canvas头部。当我在通用样式中指定背景色时，它会被GJS画布样式覆盖。这迫使我明确规定“重要”规则，而我不想这么做。 ![截图 2024-04-14 19 51 32]（https://github.com/GrapesJS/grapesjs/assets/108364491...
artf
它的目的是存储画布样式，那些不会影响 hmtl/css 结果的样式，不会导出的样式，对吧？ 正确默认的机身是白色背景，这似乎是所有浏览器的默认颜色，对吧？ 是的，但“iframe”主体没有默认背景色，所以才有那个样式，所以你需要根据你的使用情境找到合适的。
artf
有 [canvasCss]（https://github.com/GrapesJS/grapesjs/blob/99bc79c1e45da1a2db62aace97b62206eb103bc2/src/editor/config/config.ts#L154） 选项。 下次请开个讨论区，这不是核心漏洞，而是用法错误。
ctrhub
嘿，@artf。谢谢你的回答。我不确定我们是否完全理解对方，我想澄清一个细节。 是的，我知道canvasCss属性，而且我用它来更改所选组件的样式。我理解这个属性的本质：它旨在存储画布样式，那些不会影响 hmtl/css 结果的样式，不会导出的样式，对吧？ 那为什么默认画布样式有这个 CSS 规则 '''body { background-color： white; }``` ?为什么我们有理由去覆盖它？ 我理解选择了主体元素的情况，在这种情况下，为交互性应用一些样式是合理...
#57462024年3月12日作者 rhoenerSBS4 个回答
葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器？ Chrome v122 可复制演示链接 https://grapesjs.com/docs/getting-started.html#style-manager 描述一下那个虫子 如何复现这个漏洞？访问GrapeJS的“入门指南”文档中的“StyleManager”部分尝试在编辑器中使用该部分的颜色选择器。即使你在 .editor-canvas 中添加“position：relative”，当面板不在编辑器容器外时，颜色选择器仍然会计算错误的偏移 预期的行为是什么？ 颜色选择器会显示在对应的输入旁边 目前的行为是什么？ 相对偏移计算错误，选色器显示在...
bernesto
你好，@artf， 根本问题是我们试图将弹出调色板绝对放置在页面任意位置的另一个元素之上。即使原点元素不在编辑器容器节点之外，我们也需要这样做。 为满足此要求，弹出调色板不能包含在“offsetParent”的任何位置，且必须处于最高的z指数。否则，它将受其“offsetParent”可见区域的影响，并按父节点的“z-index”排序。 在我之前的补丁中，这似乎是可行的，因为示例编辑器占用了整个窗口，因此编辑器元素内的“left： 0”和“top： 0”也在正体内部是“le...
artf
@bernesto你能检查一下这个吗？因为它似乎和[你的更改]（https://github.com/GrapesJS/grapesjs/pull/5704）有关。
bernesto
是的，我明白问题所在。逻辑需要考虑父节点在容器外的情况。让我看看能不能做。
#57432024年3月11日作者 davidgabrichidze4 个回答
葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器？ Edge v122 可复制演示链接 https://jsfiddle.net/bwreyq29/1/ 描述一下那个虫子 如何复现这个漏洞？ 打开此链接 [https://jsfiddle.net/bwreyq29/1/]（https://jsfiddle.net/bwreyq29/1/），附带在“src”属性上的 JavaScript 代码将自动执行。 预期的行为是什么？ 这段代码不应该运行 目前的行为如何？ 存在XSS漏洞行为准则 [X] 我同意遵守本项目的行为准则
bernesto
我觉得预读解析师这个选项是个很好的主意。它坚持“按功能插入”的概念。 那更新“fromElement”以接受字符串元素ID或布尔值怎么样？如果 bool == true，则和现在一样，解析容器 HTML。 如果字符串 ID，它会使用元素的内容，容器则像现在一样成为编辑器。然后我们可以更新文档，支持HTML脚本模板用于开发。这样可以防止刹车变化，并促进正确的使用。 “''js const editor = Grapesjs.init（{ 容器：“#gjs”， fromElem...
artf
完全同意@bernesto的观点，无论我们多么努力让它安全，都永远不够，我也不想让人觉得库“非常安全”，以至于缺少服务器端验证。 当前选项（例如“allowUnsafeAttr”、“allowUnsafeAttrValue”）只避免了基本的常见内容。
bernesto
使用“fromElement”从激活的DOM元素加载时，这种情况是不可避免的。页面元素同步加载和执行。GrapesJS 永远没有机会处理和解除 XSS 的 html。 这个问题需要通过阻止恶意代码永远加载来解决。这应该在服务器存档时处理。但如果客户端需要处理，可以通过用脚本标签包裹代码，然后在加载到编辑器前对代码进行净化，就像这样： https://jsfiddle.net/bernesto/5gcxa0jm/1/ 我确实看到，在初始化时通过“components”属性加载...
#57052024年2月26日作者 bernesto4 个回答
葡萄JS版本 [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窗口的缩小（然后触发新增事件）。如果你换成更小的设备，这个方法就不行了，那时不会触发调整大小事件，所以你仍然需要刷新调用。
#57002024年2月24日作者 upadhyay88442 个回答
葡萄JS版本[X] 我确认使用最新版本的GrapesJS你用的是什么浏览器？ 镀铬可复制演示链接 无法提供数据敏感描述一下那个虫子 如何复现这个漏洞？在编辑器/Canvas中放置一页。将高度设定为ex-600pt，并且四边各加10pt的缓冲。现在在页面内放置两个部分。将最小高度设为某一部分，比如30点，高度为另一部分。现在，100%高度的部分与页面/父页面重叠 预期的行为是什么？ 该部分不应与页面重叠，只应覆盖父页面的可用空间，包括填充边距等。 目前的行为是什么？ ...它在页面上重叠 如果需要执行某些代码以重现该漏洞，请将其粘贴到下面： “''js 你的代码在这里 ```行为准则[X] 我同意遵守本项目的行为准则
upadhyay8844
@artf你能帮我看看吗？
ClaudeCode
谢谢你举报，@upadhyay8844。 关于=的好问题。推荐的 Canvas 方法是使用事件驱动的 API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： “JavaScript 留意变化 editor.on（'change'， （） => console.log（'something changed'））; 组件生命...
#56912024年2月21日作者 codei202 个回答
葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器？ Firefox 122.0.1 可复制演示链接 https://grapesjs.com/demo-mjml.html 描述一下那个虫子 如何复现这个漏洞？ 官方演示版：https://grapesjs.com/demo-mjml.html在画布上添加一列选择章节进入装饰区，在颜色选择器中选择背景色（注意：不要点击确定按钮）。步骤3后，点击撤销按钮，但不要点击其他地方。 预期的行为是什么？点击撤销按钮后，背景颜色应恢复到之前的颜色 目前的行为是什么？背景色保持不变。 同样的行为也出现在文字颜色上。行为准则 [X] 我同意遵守本项目的行为准则
artf
这大概和mjml插件有关，不是核心，因为我无法复现它（建议你打开相关仓库的问题）。
ClaudeCode
谢谢你举报，@codei20。 关于在通过颜色选择器切换背景或文本颜色时取消功能的问题非常好。推荐的 Canvas 方法是使用事件驱动的 API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： “JavaScript 留意变化 editor.on（'change'， （） => console.log（'somethin...