#59052024年5月24日作者 gladykov2 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Opera 10.0.5130.23 |Linux 可复制演示链接 https://grapesjs.com/demo.html 描述一下那个虫子 透明帆布从方块菜单中添加 1 Column 组件 -> Settings 标签会自动打开 ：ok_hand： 点击编辑器框内新添加的组件进入 Blocks 标签页再次点击组件 预期： 设置再次打开 实际情况： 设置未打开。 注意：我理解当组件之前未被选中时，这个功能正常工作。通过添加两个组件来验证这个行为很容易。但它会引入两种不同的行为，取决于之前的用户操作。我预计点击组件总是会打开 Setti...
artf
谢谢@gladykov，但这和核心无关，只是演示中实现的一个示例行为。
GJS Helper
这是关于GrapesJS用户体验的一个有效观察。你描述的行为不是功能失效的bug，而是用户体验上的不一致，点击已选中的组件后，如果用户手动切换到另一个面板（比如“块”），“设置”面板并不总是能重新激活。 根本原因 当组件最初添加或选择时，GrapesJS通常会激活“设置”或“样式管理器”面板。然而，如果组件已选中，用户随后手动导航到另一个面板（例如“块”、“图层”），GrapesJS会记住上一个激活面板。再次点击同一个已选中组件不会触发通常会强制面板切换回“设置”的“选择变...
#58882024年5月16日作者 Dobby852 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Chrome V124 可复制演示链接 https://jsfiddle.net/ycvz2gno/7/ 描述一下那个虫子 如何复现这个漏洞？在画布中放置文本块双击文本块内的内容内容不可编辑 预期的行为是什么？ 它应该能打开RTE，这样我们就能编辑组件内的文本 目前的行为是什么？ 什么都没发生，组件无法编辑 ```行为准则 [X] 我同意遵守本项目的行为准则
Dobby85
通过查看代码，我发现要获得 RTE 功能，我们的新组件必须扩展“ComponentTextView”。 我最初的问题是我做了类似的事情： 而且它采用了我的“基础结构”视图，而不是“文本”组件。我会尝试找个变通办法，不扩展我的“baseStructure”视图。
GJS Helper
你遇到的问题是，通过fromElement: true加载的文本组件无法编辑，即使HTML里有data-gjs-type="text"和editable="true"，这其实是GrapesJS在初始化时处理现有DOM元素的方式。 根本原因 当GrapesJS用fromElement: true初始化时，它会解析你容器内已有的HTML（你是#gjs），并将其转换为内部组件模型。虽然它正确识别了带有data-gjs-type="text"的元素并创建了对应的GrapesJS文本...
#58202024年4月17日作者 rhoenerSBS2 个回答
GrapesJS 版本[X] 我确认使用最新版本 GrapesJS你用的是什么浏览器？ Chrome v123可复制演示链接 https://jsfiddle.net/xwgons8z/描述一下那个虫子 我正在尝试通过程序将新增组件移动到父组件的特定位置，因为我有子组件，它们应该保持在最后一个索引，但图层中出现了一个bug，一旦组件移动，图层面板中会有两个对应的条目。 如何复现这个漏洞？开放小提琴将组件置于画布最后一个位置（此处不会发生）在画布最后一个位置丢弃一个组件（从现在起，掉落的组件在图层面板中有两个条目） 预期的行为是什么？ 组件可以移动，图层面板中仍然只有一个条目。 目前的行为是什么？ 移动的组件在图层面板中有两个对应的...
rhoenerSBS
我最初想通过父组件的可丢弃性质中的函数实现同样的行为，以防止组件在特定索引处丢弃，但遗憾的是该函数没有给出该函数的参数索引。
GJS Helper
感谢你报告这个问题。你发现了一个细微的时序错误GrapesJS涉及图层面板在组件添加后立即程序移动时的更新。 根本原因 问题源于component:add事件与后续程序parent.move()操作之间的时间冲突。当组件被投放到画布上时，GrapesJS首先将其添加到组件树中，触发component:add事件。负责渲染图层面板的LayerManager会监听该事件以显示新组件。 如果你随后在component:add事件处理程序中同步调用parent.move()，实际上...
#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...
GJS Helper
感谢你的联系以及对 GrapesJS的关注！看到网页设计领域有其他创新项目真是太好了。你的Web Component Designer看起来非常有趣，尤其是它对网页组件的重视，高级布局能力（网格、灵活盒、绝对定位）以及VSCode集成。 GrapesJS 是一个开源、高度可扩展的网页构建框架，旨在为创建可视化编辑器提供坚实基础。虽然它已经支持网页组件并具备广泛的样式功能，包括 flexbox 和 grid，但我们始终期待不同方法如何提升用户体验和开发者工具。 探索项目间潜在...
#58102024年4月14日作者 ctrhub4 个回答
GrapesJS 版本[X] 我确认使用最新版本 GrapesJS你用的是什么浏览器？ Arc 版本 1.35.0 / Chromium 引擎 123.0可复制演示链接 https://grapesjs.com/demo.html描述一下那个虫子 我的特殊情况： 就我而言，所有插件和通用样式都放在头部。为了在编辑器中实现类似功能，我会把这些样式添加到画布头。当我在通用样式中指定背景色时，它会被GJS画布样式覆盖。这迫使我指定 规则，而我不想这么做。 ![截图 2024-04-14 19 51 32]（https://github.com/GrapesJS/grapesjs/assets/108364491/1d2628a7-ed6...
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 个回答
GrapesJS 版本 [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 个回答
GrapesJS 版本 [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 个回答
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窗口的缩小（然后触发新增事件）。如果你换成更小的设备，这个方法就不行了，那时不会触发调整大小事件，所以你仍然需要刷新调用。
#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...