#56742024年2月9日作者 mauriciolcs22 个回答
GrapesJS 版本[X] 我确认使用最新版本 GrapesJS你用的是什么浏览器？ Arc 版本 1.29.0 （46113）可复制演示链接 https://grapesjs-react-custom-ui-vrkhwc.stackblitz.io描述一下那个虫子 如何复现这个漏洞？启用无限画布至少在画布上添加两个组成部分为其中一个设置最小高度为100vh。 预期的行为是什么？ 画布的高度不应无限增加。 目前的行为是什么？ 画布高度在无限增加。 在本演示中设置最小高度最直接的方法就是使用检查器。通过 GrapesJS配置时也会出现同样的错误。行为准则[X] 我同意遵守本项目的行为准则
artf
避免使用无限画布，因为它从未被记录，甚至没有作为长片完成。
GJS Helper
你遇到的 Capital 无限画布在元素为 min-height: 100vh 时无限增加高度的 GrapesJS 问题，是 CSS 视口单元（vh）与GrapesJS画布动态缩放机制之间的已知交互问题，尤其是在画布渲染为 iframe 时。 根本原因分析 min-height: 100vh：该 CSS 属性指示元素至少达到视口高度的100%。在GrapesJS语境中，内容渲染在一个<iframe>中。因此，画布内元素的“视口”即是 iframe。 无限画布功能：当Grap...
#56682024年2月6日作者 addlistener2 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ 版本 121.0.6167.139（官方构建）（x86_64） 可复制演示链接 没有。 描述一下那个虫子 如何复现这个漏洞？添加自定义断点并设置断点点击步出直到进入组件文本视图的逻辑 预期的行为是什么？ 源图加载 目前的行为是什么？ ComponentTextView 的 sourcemap 未加载，但已加载于 RichTextEditorModule <img width=“557” alt=“image” src=“https://github.com/GrapesJS/grapesjs/assets/4531670/7b110b3d-...
artf
我只能建议你仔细检查源地图路径 <img width=“346” alt=“截图 2024-02-12 08 45 32” src=“https://github.com/GrapesJS/grapesjs/assets/11614725/ee135460-a758-4aef-96fa-1d1b463c934d”> 例如，如果你尝试通过 CDN 加载 Grapesjs，比如像 'https://unpkg.com/grapesjs'（这里发生重定向），因为这种情况下 URL...
GJS Helper
看起来你遇到的问题是浏览器的开发者工具中ComponentTextView的源阵图无法加载，尽管RichTextEditorModule的源阵图似乎正常工作。这是调试捆绑JavaScript库时常见的困惑点，比如GrapesJS。 理解GrapesJS源地图 GrapesJS，当为分发而构建（如 grapes.min.js），会将其所有模块打包到一个 JavaScript 文件中。对应的 grapes.min.js.map 文件是一个单一的源码映射，包含所有原始源文件（包括...
#56502024年1月29日作者 Wayne-Mather2 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Edge 121.0.2277.83，Firefox 122 可复制演示链接 https://jsfiddle.net/50mga1t7/1/ 描述一下那个虫子 如何复现这个漏洞？创建一个工具栏动作来插入某些文本编辑文本节点并插入部分文本点击工具栏命令插入新的组件/文本textnode 会在编辑前重置为模型详情 预期的行为是什么？ textnode 应该显示当前正在编辑的文本和新插入的文本 目前的行为是什么？ 新文本是使用模型中的文本插入的，而不是当前视图 行为准则 [X] 我同意遵守本项目的行为准则
artf
这不是bug，将当前DOM与组件合并需要更多努力。 已经有一个类似的API（https://github.com/GrapesJS/grapesjs/blob/fb5175fd1edd13a2db54d661193fb61a354f8625/src/richtexteditor/model/RichTextEditor.ts#L414），你可以根据自己的需求使用或重新实现（用组件定义代替HTML字符串）。
GJS Helper
这是GrapesJS用于文本编辑的活动ProseMirror编辑器与组件模型GrapesJS同步的一个已知问题。当你在组件中主动编辑文本时，这些更改会被保存在ProseMirror实例中。如果触发了GrapesJS命令或操作（比如工具栏按钮点击），导致组件被重新渲染或其模型被访问，*在ProseMirror的修改提交回GrapesJS组件模型之前），组件将恢复到最后保存的状态，实际上会丢失未保存的编辑。 根本原因 当文本组件处于编辑模式时，GrapesJS编辑器会为富文本编...
#56412024年1月24日作者 yashvi20262 个回答
GrapesJS版本[X] 我确认使用最新版本GrapesJS你用的是什么浏览器？ Chrome v91可复制演示链接 https://codepen.io/Harshsne/pen/WNgZzPE描述一下那个虫子 如何复现这个漏洞？将图片附加到画布并关闭图片模态。（这样该组件就会从追踪中移除，因为我已经从UndoManager堆栈中移除了该组件） ' editor.on（'asset：close'， （） => { console.log（“接近”） const selected = editor.getSelected(); 如果 （selected & & selected.is（'image'））） { editor.Un...
artf
这里的问题不在于“Undomanager.remove”，而是追踪了什么。 当你调整图像大小时，你不是在编辑“组件”本身，而是在编辑它的“CssRule”对象，所以它没有按预期工作。 我建议你干脆跳过那些你不想跟踪的操作的撤销管理器 “''js 编辑。UndoManager.skip（（） => { // .... }); ```
GJS Helper
谢谢你举报，@yashvi2026。 关于Undomanager.remove（）不起作用的好问题。推荐的 Canvas 方法是使用事件驱动的 API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： “JavaScript 留意变化 editor.on（'change'， （） => console.log（'somet...
#56332024年1月20日作者 kla-ko3 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Chrome 版本 120.0.6099.225 可复制演示链接 https://jsfiddle.net/wattnu/opmwfvjn/ 描述一下那个虫子 如何复现这个漏洞？打开并拉动小提琴画布上有两个组件。“hello world” div 和一个蓝色背景 div。“hello world” div 是根据命令 'editor.select(editor.getComponents().models[0]); ' 选择的在选择蓝色框并在画布位置选择删除时，调用“component:remove”处理程序。然而，“hello world...
artf
谢谢@kla-ko，实际上有一个逻辑会阻止在“组件：移除”事件中选择其他组件，我会在下一个版本修正，但我建议你切换到另一个事件。 “component：remove”事件会针对每个被移除的组件触发，这意味着它会针对你决定移除的组件内嵌套的组件触发。你可以使用“run：core：component-delete”事件，该事件在删除命令完成后只触发一次，目前应该能正常工作，无需修复。
kla-ko
谢谢@artf。这招管用得非常顺利！ /
GJS Helper
你遇到的 editor.select() 在 component:remove 处理程序中无法正常工作的问题，是由于事件的时间点和 GrapesJS的内部组件生命周期有关。component:remove事件在组件完全脱离 DOM 并从编辑器内部组件树中移除之前就触发了。在此阶段，编辑器可能处于选择的中间状态，任何同步尝试更改选择的尝试都可能被后续的内部逻辑覆盖或忽略，从而完成组件移除过程。 根本原因 当component:remove被触发时，GrapesJS正在主动处理...
#56322024年1月20日作者 Harshsne262 个回答
GrapesJS版本 [X] 我确认使用最新版本GrapesJS 你用的是什么浏览器？ Chrome v91 可复制演示链接 https://codepen.io/dhanadsp1120/pen/ExrRvOB 描述一下那个虫子 如何重现这个bug？通过调用 um.stop（） 禁用撤销管理器。对内容进行修改。使用 um.start（） 重新启用撤销管理器。 预期的行为是什么？ 当撤销管理器恢复时，暂停后所做的任何修改应被视为一次更改。这确保点击“撤销”会将所有修改恢复到撤销管理器中断前的状态。 目前的行为是什么？ 撤销管理器停止后所做的更改在恢复后不会被包含在内。选择撤销选项后，这些更改会持续存在，不会如预期回滚。 另外我也尝...
artf
当撤销管理器恢复时，暂停后所做的任何修改应视为一次更改。这确保点击“撤销”会将所有更改恢复到撤销管理器中断前的状态。 抱歉，这不是UndoManager的启动/停止方式。禁用后，所有更改都会直接跳过UndoStack。 你说的是一个程序化的变更组合，确实很有趣，但目前还不支持，所以我不认为这是个bug。 我建议在[路线图]（https://github.com/GrapesJS/grapesjs/discussions/5291）中提出这个建议，如果更多人需要，我们可以考虑...
GJS Helper
你遇到的问题是 GrapesJS UndoManager的预期行为。当调用 um.stop() 时，UndoManager会停止监听编辑者的更改。因此，在此期间所做的任何修改都不会被记录在历史中。当 um.start() 被调用时，它会从那点开始继续追踪，完全忽略暂停期间发生的更改。你的目标是将 um.stop() 到 um.start() 之间所有的更改都当作一个原子级的不可执行操作来实现。这可以通过手动在UndoManager的历史中添加自定义撤销步骤来实现，该步骤捕捉...
#56312024年1月19日作者 Harshsne262 个回答
GrapesJS版本 [X] 我确认使用最新版本GrapesJS 你用的是什么浏览器？ Chrome v91 可复制演示链接 -- 描述一下那个虫子 如何复现这个漏洞？ 我想在undomanager堆栈中添加一个更改。 var components = editor.Components;editor.UndoManager.add(components.getComponents().models); 预期的行为是什么？ 用um.add（）添加的更改应该被添加......当我点击撤销和重做时，这个更改也应该显示出来。 目前的行为是什么？ 该变更不会被添加。 行为准则 [X] 我同意遵守本项目的行为准则
artf
@Harshsne26你需要提供一个可复现的漏洞演示
GJS Helper
你遇到的 editor.UndoManager.add() 不按预期工作的问题，源于对方法预期用途及其预期参数类型的误解。GrapesJS UndoManager 旨在跟踪编辑器整体状态的变化，而非直接跟踪单个模型集合。 根本原因 参数类型错误：editor.UndoManager.add()方法期望以State对象作为其参数。State对象是编辑器内容的全面快照，通常包含诸如html、css、components（序列化的JSON字符串或对象）、styles、pages和...
#56302024年1月18日作者 kla-ko2 个回答
GrapesJS 版本 [x] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Chrome 版本 120.0.6099.225 可复制演示链接 https://jsfiddle.net/wattnu/y8L6whun/ 描述一下那个虫子 如何复现这个漏洞？Goto jsfiddle运行代码在画布上，选择蓝色的div组件尝试拖动位于底部中央的调节把手调整大小手柄不会随着鼠标移动在 js 代码中，查看顶部的插件实现。在那里，考虑以下部分：注释 onStart 配置 --> '// onStart: (event, opt) => { console.log('resize started') } ,'重新运行小提琴。现在...
GJS Helper
你遇到的问题是，配置onStart回调以resizable属性，导致组件无法调整大小，是因为GrapesJS（以及通常底层的拖拽/缩放库）处理自定义事件回调的方式。当定义了onStart回调时，如果你想继续默认的调整大小操作，通常会显式返回true。如果回调返回undefined（这是没有 return 语句时的隐式返回值）或 false，则调整大小操作实际上被取消或阻止启动。 根本原因 GrapesJS 中的resizable功能依赖于一个内部机制，检查onStart回调...
#56182024年1月15日作者 Ashwinvalento3 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Edge v120.0.2210.121 可复制演示链接 https://codepen.io/ashwinvalento/pen/jOJMPqx 描述一下那个虫子 如果我们设置了 config.parser.optionsHtml.allowScripts: true 并创建了一个包含脚本的组件，那么当我们用 grapesjs-preset-webpage 插件导入代码时，脚本标签会被重复。 如何复现这个漏洞？ 在演示链接（https://codepen.io/ashwinvalento/pen/jOJMPqx）将“复制脚本块”放入画布。...
artf
直接将 JS 导入为组件从来不可能，所以它被视为一个新的组件。
Ashwinvalento
有没有办法识别现有组件的脚本并在导入时删除它们？我们无法移除所有脚本标签，因为需要保留手动添加的脚本。
GJS Helper
你遇到的脚本重复问题是，在多次导入HTML时，尤其是在 GrapesJS中，尤其是 config.parser.optionsHtml.allowScripts: true，是 GrapesJS 在 setHtml 操作中如何对合组件的已知行为。虽然 setHtml 设计用于替换画布内容，但脚本组件的对账逻辑可能并不总是正确识别和替换现有的相同脚本，导致它们被附加而非更新或移除。 根本原因 当 config.parser.optionsHtml.allowScripts 设...
#55842023年12月27日作者 vian0132 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Chrome v91 可复制演示链接 https://grapesjs.com/demo.html 描述一下那个虫子 如何复现这个漏洞？ 最近我必须将 grapesjs 0.14.62版本升级到最新版本（0.21.8）。在旧代码中，我们用“storage：end：load”来做一些操作，前提是所有组件都挂载到画布上。 但在当前版本中，它的工作方式已经不一样了。正如我在文档中看到的，“storage：end：load”现在会在存储加载请求完成后立即触发。有没有什么方法或其他事件能达到和之前相同的效果？ 目前我只能在“storage：end：l...
artf
@vian013请只用可复现的演示链接打开bug问题，快速检查一下活动似乎正常运行
GJS Helper
从版本0.14.62到0.21.8，GrapesJS中storage:end:load事件行为的变化是有意为之，反映了更细致的事件系统。在新版本中，storage:end:load会在数据成功从存储管理器中检索时触发。这发生在组件解析、添加到编辑器模型树并随后渲染到画布之前，DOM.To 实现所有组件挂载到画布后才执行代码的预期行为，你应使用editor.on('load', ...)事件。### 根本原因与解释 storage:end:load事件的目的是表示存储加载过程...