PageKit — 可自托管的 GrapesJS 建站工具,附完整源码。 获取抢先体验

问题 #6143💬 已回答提出于 2024年9月10日作者 rhoenerSBS0 个反应

BUG/[问题]:如何在添加/挂载时正确包装组件?

快速解答作者 jasonvijayy

你好,@artf, [可复制链接](https://codepen.io/Logeshwaran-codepen/pen/raLJpYb) 我用'component.replaceWith()'和UndoManager一起运行时也遇到崩溃。 这只发生在编辑器生命周期事件中触发“replaceWith()” (例如 'change:status', 'component:selected', 'component: deselect') 在撤销时,GrapesJS 尝试恢复旧组件的选择/状态, 但它已不存在于父集合中,导致以下错误: “无法读取未定义的属性(读取'indexOf')” 同样的“replaceWith()”逻辑在 Tr...

阅读下方完整回答 ↓

问题

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器? Chrome v128 可复制演示链接 https://jsfiddle.net/fjyk6n4a/2/ 描述一下那个虫子 你好,@artf, 我目前正在尝试将一个组件包裹在一个截面组件中,如果它还没有被包裹的话。我正在连接 component:mount 事件,并将新增组件替换为 section(该组件的子节点是新增的)。 我的代码大致是这样的: 我遇到的问题是UndoManager的栈和实际情况没有完全对齐。添加和封包后,栈有三个条目:移除原始组件、添加部分和添加原始组件。点击撤销时,该部分被移除,原始组件保留。但它有bug,因为它无法移除,也不太存在,因为栈条目没有正确反映变更(可能缺少初始添加)。 如何复制我描述的内容:打开可重现的演示链接添加文本组件(在分层中可见,在剖面中被收装)点击Ctrl+Z撤销文字仍然存在画布和图层中,部分已消失。文本不可移除 我的问题: 理想情况下,我想更改UndoManager的栈,让撤销时,要么同时移除该分段和原始组件,且没有bug(目前是这个问题),要么移除原组件,如果你再次点击撤销,该分区就会被移除(就像该分区是先添加的一样)。在component:mount事件中,堆栈还没有添加内容的最新条目,所以我当时无法操作它。 在没有UndoManage...

回答(2)

jasonvijayy• 2026年1月30日

你好,@artf, [可复制链接](https://codepen.io/Logeshwaran-codepen/pen/raLJpYb) 我用'component.replaceWith()'和UndoManager一起运行时也遇到崩溃。 这只发生在编辑器生命周期事件中触发“replaceWith()” (例如 'change:status', 'component:selected', 'component: deselect') 在撤销时,GrapesJS 尝试恢复旧组件的选择/状态, 但它已不存在于父集合中,导致以下错误: “无法读取未定义的属性(读取'indexOf')” 同样的“...

GJS Helper• 2026年5月17日

谢谢你举报,@rhoenerSBS。 关于BUG/[问题]:如何在添加/挂载时正确包装组件?的好问题。推荐的 Canvas 方法是使用事件驱动的 API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.on('change', () => console.log('something changed')); 组件生命周期 editor.on('component:mount', (c) =>...

相关问答

通过相似的问题讨论继续研究。

与此问题匹配的付费插件

根据问题关键词和标签相关性精选,助你更快交付。

查看全部插件

正在加载付费插件推荐……

免费方案

在以下平台查看开源 GrapesJS 插件: GitHub 或在我们的免费目录中快速搜索。

浏览免费插件 →
高级方案

高级插件提供支持、定期更新和生产就绪的功能——为你节省数天的集成工作。

浏览高级插件 →

相关教程

关于同一主题的深入指南。

全部教程 →

浏览插件分类

直接跳转到市场上的插件分类页面。