我正在尝试扩展“预览”命令。我本以为下面的代码会运行正常的预览命令和控制台输出，但实际上只有控制台语句能运行。我怎样才能保留原始预览代码？以下内容对我来说还算有效，直到有人能指出我哪里出了问题。

问题 #3366💬 已回答提出于 2021年3月26日作者 kerryj890 个反应

扩展预览命令

快速解答作者 artf

如果你指定了一个新的“run（）”函数，命令只会运行新的，否则就无法完全更改命令（这里更多内容是关于[扩展命令]（https://grapesjs.com/docs/modules/Commands.html#extending））

问题

我正在尝试扩展“预览”命令。我本以为下面的代码会运行正常的预览命令和控制台输出，但实际上只有控制台语句能运行。我怎样才能保留原始预览代码？

编辑。Commands.extend（'preview'， {
    run（） {
        console.log（“foo”）;
    }
});

以下内容对我来说还算有效，直到有人能指出我哪里出了问题。

编辑。Commands.add（'preview-ext'， {
    run（e） {
        e.runCommand（'preview'）;
        console.log（“foo”）;
    }
});

回答（4）

artf• 2021年4月7日

ronaldohoch• 2021年11月12日

你好，Artf，奇怪的是，我也需要和他一样的东西。

所以，最好的做法就是模仿他？在扩展预览中运行原始预览命令？

ronaldohoch• 2021年11月16日

嗯......

我还在做的另一件事是通过在事件上运行命令来扩展预览。

“''js editor.on（“run：preview”，（）=>{console.log（“run-preview”）}）; editor.on（“stop：preview”，（）=>{console.log（“stop-preview”）}）;

ClaudeCode• 2026年5月17日

谢谢你举报，@kerryj89。关于扩展预览命令的好问题。GrapesJS 推荐的方法是使用事件驱动 API。从这里开始：查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/）寻找“on（）”事件监听器方法大多数操作可以通过监听编辑器和组件事件来实现常见模式： “JavaScript 留意变化 editor.on（'change'，（） => console.log（'something changed'））; 组件生命周期 editor.on（'component：mount'，（c） => console.log（'compone...

在 GitHub 上查看完整讨论 →