GrapesJS 问题

kanaihyakumar

之前，我需要更清楚地说明重现问题的步骤。以下是制作该期的精细步骤。 重现问题的步骤：直接点击该部分。观察显示的可调整大小选项。点击该部分中有列组件的区域（我为视频中所有元素添加了边框以便清晰）。注意，已选中分区组件，但底部可调整大小选项未显示。 [视频链接]（https://drive.google.com/file/d/1YUEYZxjpD1Un-xaBRUybuKDZO0_Xffmu/view） 实际行为：直接点击该部分时，底部可调整大小选项如预期显示。然而，当点击有列...

kanaihyakumar

相信我，我很幸运能找到这种点击不同地方的悲惨行为，虽然表现不同，但表现不同。

artf

我觉得如果不是按点击键，它不会消失，但这是预料之中的，因为它准备被拖动

artf

UndoManager跟踪的是组件状态的变化，而不是它的DOM。 这应该适用于你的情况，'element.components（'Hello Planet'）'

leo-budgetsimple

@artf 谢谢！

ClaudeCode

谢谢你报告，@leo-budgetsimple。 关于在组件内部HTML更改后撤销功能失效的好问题。推荐的UndoManager方法是使用事件驱动的API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： “JavaScript 留意变化 editor.on（'change'， （） => console.log（'som...

artf

你可以跳过移除组件（'instance.value.Components.clear（）'），因为你本来就会破坏编辑器 “''js if （确认（'你确定要清理画布吗？'）{ localStorage.clear（） reRender（） } ``` 这不应该产生任何错误

WilliamDASILVA

@jdkcoder 通过注释“reRender”功能，这个问题就解决了。 “lastComponent”错误源于编辑器中的“this.get（'selected'）”在某个节点未定义。通过检查调试器，当调用 reRender 时，确实会变成未定义，因为它重新初始化了葡萄。 关于调整尺寸，我没看到你举的Stackblitz例子有什么问题。我觉得你应该单独开一期，详细说明你的行为和预期。

ClaudeCode

谢谢你举报，@jdkcoder。 无法读取未定义属性（读取“lastComponent”）和可调节大小功能不工作的问题似乎是竞赛条件或状态管理时序问题。这通常发生在组件生命周期事件和DOM修改重叠时，导致状态不一致。 尝试什么： 添加setTimeout包装器以确保DOM已稳定： “JavaScript setTimeout（（） => { 你在这里的行动 }, 0); 推荐的下一步步骤： 如果还没测试过，请用最新的GrapesJS版本测试 提供最小可重复的示例（CodeS...

artf

当你想在 GrapesJS API 层面扩展某些东西时，可以使用这些插件 “''js <StudioEditor ref={editorRef} 选项={{ 插件：[ editor => addCustomComponent（editor） ], // ... ```

MdShadabAhamad

我还添加了自定义样式设置StyleManager，但显示是空白的，https://stackblitz.com/edit/vitejs-vite-4noagg?file=src%2FApp.tsx

ClaudeCode

谢谢你举报，@MdShadabAhamad。 自定义组件在初次渲染时无法在 grapsJs/studio 中显示的问题似乎是竞态条件或状态管理时序问题。这通常发生在组件生命周期事件和DOM修改重叠时，导致状态不一致。 尝试什么： 添加setTimeout包装器以确保DOM已稳定： “JavaScript setTimeout（（） => { 你在这里的行动 }, 0); 推荐的下一步步骤： 如果还没测试过，请用最新的GrapesJS版本测试 提供最小可重复的示例（CodeS...

artf

@Vampire-V，请正确遵循bug问题模板。没有可复现的演示，我们无法帮你。

Aravinth-2020

### 葡萄JS版本[x] 我确认使用最新版本的GrapesJS### 你用的是什么浏览器？版本 127.0.6533.89（官方构建）（64位）### 可复制演示链接### 描述一下那个虫子请检查此事。select的值为未定义。我在React里用它，结果出现了错误异常。/* 返回所选组件的模型 @return {组件|null} @public */ EditorModel.prototype.getSelected = 函数 （） { return this.selec...

Aravinth-2020

嘿，@Vampire-V，请正确遵循漏洞问题模板。没有可复现的演示，我们无法帮你。 你能分享一下解决办法吗？ 我选择开放图层管理器时也遇到同样的问题，这个问题是在我自定义左边栏面板中选择另一个页面后出现的。

artf

感谢@aswinkumar863报告。我很乐意合并修复的PR。

ClaudeCode

谢谢你举报，@aswinkumar863。 关于Image Component允许通过拖放上传和选择视频文件的建议很棒！虽然这个具体功能还没有出现在核心 API 中，但有几种方法可以实现类似的行为。 使用事件系统： “JavaScript editor.on（'component：update'， （component） => { 你的逻辑 }); ``` 替代方法： 听取“selector：add”以获取CSS选择器更改 使用“selector：custom”来表示自定义...

artf

https://github.com/GrapesJS/grapesjs/issues/6019#issuecomment-2267466020 请避免制造重复问题。

ClaudeCode

谢谢你举报，@yashvi2026。 无法隐藏某些特定组件类型的RTE的问题似乎是竞态条件或状态管理时序问题。这通常发生在组件生命周期事件和DOM修改重叠时，导致状态不一致。 尝试什么： 添加setTimeout包装器以确保DOM已稳定： “JavaScript setTimeout（（） => { 你在这里的行动 }, 0); 推荐的下一步步骤： 如果还没测试过，请用最新的GrapesJS版本测试 提供最小可重复的示例（CodeSandbox）——这有助于团队更快识别根本...

artf

是的，'onActive'现在是异步方法，所以用'extendFnView'扩展它不够，你的代码会先于原始代码执行。 无论如何，你用一行简单的CSS也能达到同样的结果 “''CSS .gjs-rte-toolbar { 显示：无; } ```

yashvi2026

但我只想隐藏某些特定类型，比如：文本@artf

artf

你仍然可以不使用“extendFnView”来扩展视图。如[这里]（https://grapesjs.com/docs/modules/Components.html#extend-parent-functions）所示，通过原型重用原始组件类型。

ClaudeCode

谢谢你举报，@thigh。 关于图层管理器在页面切换时会断裂的建议很棒！虽然这个具体功能还没有出现在核心 API 中，但有几种方法可以实现类似的行为。 使用事件系统： “JavaScript editor.on（'component：update'， （component） => { 你的逻辑 }); ``` 替代方法： 听取“selector：add”以获取CSS选择器更改 使用“selector：custom”来表示自定义规则 利用“change：*”事件进行细致跟踪...

artf

你应该避免把共享样式放在组件相关的样式里。 请查看关于如何预防这种情况的讨论：https://github.com/GrapesJS/grapesjs/discussions/5968

ihatov08

作为临时变通，每个组件的样式前缀都带有 id。 “''js 从 './data/hero-1' 导入 { HTML 作为 hero1html，css 作为 hero1css }; 从 './data/content-1' 导入 { html 作为 content1html，css 作为 content1css }; 连续来源 = [ { 编号：“英雄-1”， 名字：“英雄1号”， 分类：“英雄”， HTML：hero1html， CSS：hero1css， 类别：“BG-G...

ihatov08

@artf 谢谢你的回复。 我想确认一下#5968