在组件内部HTML被更改后，撤销功能无法正常使用

Question

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ 最新消息 可复制演示链接 https://jsfiddle.net/condsjm1/ 描述一下那个虫子 如何复现这个漏洞？更改组件的内部HTML按CTRL+Z键 预期的行为是什么？ 撤销内容 目前的行为是什么？ 但内容不会被撤销 描述： 在小提琴上，按下“切换到Hello Planet”的按钮，然后选择编辑器，按CTRL+Z 撤销和重做都不行，但如果你正常改“Hello World”文本，它就能正常工作。 我觉得我改错了内容？如果是这样，修改组件内容并模拟原生行为的最佳方法是什么？行为准则 [X] 我同意遵守本项目的行为准则

artf · Accepted Answer

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

leo-budgetsimple · Answer

@artf 谢谢！

GJS Helper · Answer

你遇到的问题是直接操作组件的 innerHTML 属性，绕过了 GrapesJS内部的变更追踪机制。 GrapesJS的撤销/重做管理器（ Editor 实例的一部分）只记录通过自身API或用户在编辑器内操作发生的更改。当你直接设置 component.view.el.innerHTML时， GrapesJS 不知道这个修改，因此不会被添加到撤销堆栈中。 根本原因 GrapesJS 撤销/重做系统依赖于通过 GrapesJS API观察组件模型的变更。当你直接访问并修改DOM元素的 innerHTML （例如 component.view.el.innerHTML = '...'），你就绕过了 GrapesJS 模型的 set 方法，该方法负责发送撤销管理器监听的变更事件。 解决方案：使用 GrapesJS 组件API 为了确保撤销/重做管理器正确跟踪更改，您必须使用 GrapesJS 组件API来修改其内容。对于更改组件内部HTML， setContent 方法（组件模型中可用）是正确的方法。该方法内部使用 set 方法处理 content 属性，触发撤销管理器所需的事件。 以下是...

在组件内部HTML被更改后，撤销功能无法正常使用

问题

GrapesJS 版本

你用的是什么浏览器？

可复制演示链接

描述一下那个虫子

行为准则

回答（3）

相关问答

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

Undo manager not working properly on undoing a remove action

_undoexc status open

从 v18.4 更新到 GrapesJS v19.5 会导致 Chrome 变得无响应

与此问题匹配的付费插件

相关教程

Introducing Search on GJS.Market

如何在2026年用 GrapesJS 构建AI驱动的页面构建器

2026年构建一个SaaS页面构建器需要多少钱？

浏览插件分类