#62812024年10月30日作者 sumasal3 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ 最新的Chrome、Firefox、Edge 可复制演示链接 https://grapesjs.com/演示 描述一下那个虫子 如何复现这个漏洞？在图层管理器中拖动一个组件，尝试将其置于本体下方的其他物品之间不允许。允许筑巢 预期的行为是什么？ ...嵌套和重新排序都应被启用 目前的行为是什么？ ...顶层仅启用嵌套 行为准则 [X] 我同意遵守本项目的行为准则
artf
下次版本会修复。 感谢@sumasal的报告，也感谢@mohamedsalem401的修复 🙇 ♂️
sumasal
期名被删减了。我的意思是，它似乎能在较旧版本如0.21.8及以下运行
GJS Helper
GrapesJS层管理器设计成允许在同一层级重新排序组件，也可以在其他层级内嵌套组件。根据官方GrapesJS演示（https://grapesjs.com/demo）和最新版本的GrapesJS，该功能运行正常。 你遇到的问题可能源于在图层管理器中拖放物品时需要的精确度，以区分重新排序和嵌套。 理解层管理器拖放行为 当你在图层管理器中拖动组件时，视觉反馈会显示预期操作： 重新排序（同一级别）: 要将组件重新排序到与其兄弟级别相同（例如，将组件移动到另一个组件上方或下方，该...
#62712024年10月25日作者 padcom4 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Linux和Mac上的Firefox 131.0（64位） 可复制演示链接 https://grapesjs.com/演示 描述一下那个虫子 如何复现这个漏洞？开始拖动“悬停我”按钮尽量把它放在“所有文本块都可以轻松编辑......”的上面。 预期的行为是什么？按钮可以随处放置图层管理器可用于重新组织元素 目前的行为是什么？按钮只能在容器开头放置图层管理器内的拖拽也有同样的限制行为准则 [X] 我同意遵守本项目的行为准则
padcom
你们太棒了！正是时候，正好及时:)我今天下午有个演讲，现在我也能演示它在Firefox上的工作了！
padcom
我已经追踪到Firefox版本109.0的重大变更。这是第一个有问题的。108.0.2版本运行良好。希望这些信息对你有帮助。
padcom
我也测试了2024-10-24-21-16-15-mozilla-central的133.0a1，问题依然存在。
#62692024年10月25日作者 bt-mkt4 个回答
GrapesJS版本 [X] 我确认使用最新版本GrapesJS 你用的是什么浏览器？ Chrome 版本 130.0.6723.59（官方版本）（arm64） 可复制演示链接 https://codepen.io/btmkt/pen/QWeOJRB?editors=1111 描述一下那个虫子 如何复现这个漏洞？打开控制台。在画布内放置多个组件（例如用三列方便复现）。将extra类别末尾添加的test-comp组件拖曳到新增组件上。 预期的行为是什么？ 组件model和 viewInit 事件（至少不确定是否有其他）应该只在将组件放入画布时触发，而不是每次拖到可丢弃组件上方时触发。 目前的行为是什么？ 组件model和view初始...
artf
@mohamedsalem401这很可能是因为编辑器太肤浅了。 我觉得利用canMove中的“临时”选项（我们已经用它跳过部分动作）是合理的。你怎么说？ “''js const wrapper = this.getShallowWrapper（）; srcModel = wrapper？.附录（来源，{ 临时：真实}）[0] ||无效; ```
mohamedsalem401
@artf 是的，我怀疑这和“浅层编辑器”有关。希望临时方案能奏效，然后我再开永久居民申请
bt-mkt
@mohamedsalem401这很可能是因为编辑器太浅了。我觉得利用canMove中的“临时”选项（我们已经用它跳过部分动作）是合理的。你怎么说？“''jsconst 包装器 = this.getShallowWrapper（）;srcModel = wrapper？.附录（来源，{ 临时：真实}）[0] ||无效;``` 你好，@artf， 上面看到的改动（我看到已经实现了）似乎并没有解决我遇到的问题。它和0.22.1版本一样。 我已经把手写笔升级到了0.22.3（ht...
#62632024年10月24日作者 yashvi20264 个回答
GrapesJS 版本[X] 我确认使用最新版本 GrapesJS你用的是什么浏览器？ 铬可复制演示链接 https://codepen.io/Harshsne/pen/xxoOyXO描述一下那个虫子 如何复现这个漏洞？使用 RTE 添加词语链接，添加链接组件现在在链接组件后输入一个不留空格的词，再次选择该词，添加链接。添加后，点击文本框外。 预期的行为是什么？ 第二个新增链接应包裹在第一个链接和文本上。 目前的行为是什么？ 新增了两链接组件。 代码 var url = window.prompt('Enter the URL to link to:'); rte.insertHTML（<a class="link" href=$...
sirbeagle
点燃——唯一的坏处是我们可能永远不知道最终的修复结果。 @artf - 我觉得我们可以结束这个问题了。
sirbeagle
我已经玩了不少，能在@yashvi2026提供的Codepen上重现出这个错误。我大多数情况下的繁殖步骤非常相似： 在文本框中输入两个单词，中间有许多空格。 双击单词或用鼠标手动选择单词，选中第一个单词 使用自定义RTE添加链接 跳出框框点击 在现有文本中的链接后双击返回 在链接后高亮单词，并用鼠标将高亮扩展为包含第一个链接的首字母 使用 RTE 添加另一个链接 点击文本框外 然而，我在开发环境中无法复现这种效果。经过多次反复试验，我发现Codepen使用的是GrapesJ...
yashvi2026
是的，升级到最新版本后，这个问题就不出现了。
#62602024年10月24日作者 hr12012 个回答
GrapesJS 版本[X] 我确认使用最新版本 GrapesJS你用的是什么浏览器？ Microsoft Edge 130.0.2849.46可复制演示链接 https://jsfiddle.net/uwybfd98/描述一下那个虫子 如何复现这个漏洞？选择旋转木马组件点击图片右上角或左下角的空格并选择 div; 克隆二次 预期的行为是什么？ 克隆只触发一次 目前的行为是什么？ 它递归，导致卡壳 如果需要执行某些代码以重现该漏洞，请将其粘贴到下面： ![DC23C5C8E486B07C53A673E38406a1e]（https://github.com/user-attachments/assets/44686398-451a...
artf
@hr1201 onRender可以多次触发，如果你不好好清理，就绝不应该在那里附加监听器。 你的逻辑也完全是模型相关的，所以它不应该出现在视图里，只需在“model.init”方法中移动代码
GJS Helper
谢谢你举报，@hr1201。 关于在组件中使用 component：clone 时出现的错误，这个问题很棒。推荐的组件方法是使用事件驱动的API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： “JavaScript 留意变化 editor.on（'change'， （） => console.log（'somethin...
#62502024年10月23日作者 maxming23332 个回答
GrapesJS 版本[X] 我确认使用最新版本 GrapesJS你用的是什么浏览器？ Chrome 129.0.6668.101可复制演示链接 https://grapesjs.com/演示描述一下那个虫子 如何复现这个漏洞？ 开放 https://grapesjs.com/演示 在 DevTools 中运行这个脚本： 预期的行为是什么？ 成功无错误地复制 目前的行为是什么？ 成功复制但有错误： <img width=“472” alt=“image” src=“https://github.com/user-attachments/assets/14309772-7e8e-4ce2-ba14-7aefbed8614f”> --...
maxming2333
除了上述方法，还有其他复制页面的方法吗？
GJS Helper
你在克隆GrapesJS页面的主组件并将其添加到新页面时遇到的TypeError: Converting circular structure to JSON，是与组件序列化存储相关的常见问题GrapesJS。这是因为实时GrapesJS Component模型，尤其是在渲染后带有关联的DOM元素（el）后，包含复杂的内部引用，形成循环依赖。当GrapesJS尝试序列化此类组件（例如将其添加到新页面以实现持久化）时，JSON.stringify因这些循环结构而失败。 根本原...
#62492024年10月23日作者 yashvi20263 个回答
GrapesJS 版本[X] 我确认使用最新版本 GrapesJS你用的是什么浏览器？ 铬可复制演示链接 ---描述一下那个虫子 editor.getModel().initBaseColorPicker(DomElement, { / spectrum options / }); 在内化之后，当 palete 打开时，我想给它设置一个颜色？@artf 行为准则[X] 我同意遵守本项目的行为准则
NeonLexie
这看起来很有趣。我倒是愿意试试看。
GJS Helper
要为初始化为 editor.getModel().initBaseColorPicker()的自定义颜色选择器设置初始颜色，你需要在Spectrum.js选项对象中传递 color 选项。 GrapesJS的 initBaseColorPicker 方法内部使用 [Spectrum.js]（https://bgrins.github.io/spectrum/） 作为颜色选择器功能，并直接暴露Spectrum.js选项。 解决方案 当你调用 initBaseColorPick...
#62482024年10月22日作者 Frubl2 个回答
GrapesJS 版本 [x] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ 铬 可复制演示链接 https://jsfiddle.net/a2hbxg0y/1/ 描述一下那个虫子 如何复现这个漏洞？打开开发工具，编写 iframe 正体元素样式 - 缩放：n; 目前的行为是什么？ 当鼠标悬停在元素上时，蓝色边框会正常工作，而偏移则不然。它们的大小与缩放时相同：1; 附言：我无法分享完整复制演示的链接，因为CSS的更改需要在Canvas内完成。 附言： 可能已经有合适的缩放方法，但我只找到了整个画布的缩放。我想让其中一种设备类型的缩放更小 行为准则 [X] 我同意遵守本项目的行为准则
artf
你不应该编辑iframe的缩放，应该用[原生API]（https://grapesjs.com/docs/api/canvas.html#setzoom）
GJS Helper
你发现了GrapesJS中与showOffsets特性相关的特定bug，当iframe身体应用了CSS zoom属性时。这是一个合理的观察，我可以确认你描述的行为。 问题确认 当zoom应用到GrapesJS画布iframe的body时，视觉内容会正确缩放（或放大）。蓝色选区边框（轮廓）也会相应缩放，因为它通常是直接应用于元素的CSS属性。然而，showOffsets指示器（显示填充和边距值的蓝色/橙色框）不会缩放;它们的大小与应用zoom: 1相同，相对于缩放内容显得异常...
#62112024年10月11日作者 jlafosse4 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Firefox 131.0.2 可复制演示链接 https://grapesjs.com/demo-newsletter-editor.html 描述一下那个虫子 如何复现这个漏洞？进入 grapesjs 演示，然后导入以下 html：打开浏览器控制台。快速多次点击图片。 预期的行为是什么？ 应该能正常工作，没有错误。 目前的行为是什么？ 这会导致 FireFox 出现递归错误。Chrome 似乎不受此问题影响。我正在 OSX 13.6.9 上测试，并附上了一段简短的屏幕录制。 我怀疑问题来自以下函数： https://github.com...
artf
嘿，@jlafosse谢谢你的报告。 我不认为最新版本会有这个问题： <img width=“123” alt=“截图 2024-10-21 19 00 04” src=“https://github.com/user-attachments/assets/ff074a31-cd19-4547-bb27-596c92e16d64”> 你能再试着再检查一次吗？
#62022024年10月9日作者 klipto-inc2 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ 129 可复制演示链接 https://grapesjs.com/演示 描述一下那个虫子 const newEditor = grapesjs.init({ fromElement： true， // 允许HTML中的组件 容器：“#editor”， 画布：{ 剧本：[ “https://cdn.jsdelivr.net/npm/[email protected]/dist/preline.min.js”， ], }, 高度：“100VH”， 插件：[ gjsPreset网页， GjsBlockBasic， gjsForms， pluginTool...
artf
@klipto-inc，请制作带有正确且可复现的实时演示的错误报告
GJS Helper
你遇到的 Preline.js 在 GrapesJS 画布上无法工作的问题，尽管它通过 canvas.scripts包含，是依赖 DOMContentLoaded 初始化的 UI 库常见的时序问题。 根本原因 许多JavaScript UI框架和库，包括Preline.js，设计为在浏览器DOMContentLoaded事件触发时自动初始化其组件。该事件表示初始HTML文档已被完全加载和解析。 当你在GrapesJS中包含canvas.scripts脚本时，脚本确实会加载到...