问题 #3130💬 已回答提出于 2020年11月10日作者 jenter2 个反应

标准方法：对HTML工具栏和徽章进行轻微重构

快速解答作者 artf❤ 1

你好@jenter，好问题。不幸的是，我从未真正关注过画布扩展或其界面元素的可能性，所以肯定没有绝对正确的做法。如果有人愿意提出解决方案，我很乐意帮你评估。

问题

版本：

'0.15.10'

这个问题旨在验证是否有合适的方法通过自定义插件扩展当前 https://github.com/artf/grapesjs/blob/master/src/canvas/view/CanvasView.js。我们特别回顾了该文件中的“render（）”方法，以稍微修改HTML以结合工具栏和徽章，实现该UI设计： ![图片]（https://user-images.githubusercontent.com/1368216/98736636-12e2d980-2373-11eb-8871-7ac45dcdae3e.png）

过去，我成功地用编辑器扩展了命令。Commands.extend（'select-comp'， {'，但想听听是否也能用类似的方法处理视图文件 -and-，如果你发现这个改动的界面有任何异常信号。

提前感谢大家的反馈或见解

回答（4）

artf• 2020年11月18日

jenter• 2020年11月23日

@artf我会审阅一些提案/想法并加入这个帖子。

artf• 2020年11月25日

太好了，谢谢你，Jason

ClaudeCode• 2026年5月17日

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

在 GitHub 上查看完整讨论 →