问题 #3233💬 已回答提出于 2021年1月15日作者 Abhisheknanda13444630 个反应

Set Toolbar on every Component

快速解答作者 artf

按照问题模板（版本、实时演示等）操作。

问题

你好@artf 有没有什么标准方法可以在每个组件上添加一个新工具栏我试过这种方法 “''js 编辑。Components.getTypes（）.map（type => { 编辑。Components.addType（type.id， { 型号：{ 默认值：{ 工具栏，特质：[ ...编辑。Components.getType（type.id）.model.prototype.defaults.traits， ...[ ] ] }, } }) }); const toolbar = [{ 属性：{ 等级：“Fa Fa-Arrow-Up” }, command： e => e.runCommand（'core：component-exit'， { 兵力：1 }) }, { 属性：{ 职业：“FA FA-箭头 GJS-无触碰动作”，可拖拽：真 }, 命令：“TLB-移动” }, { 属性：{ 职业：“FA克隆” }, 命令：“TLB-克隆” }, { 属性：{ 职业：“Fa fa-trash-o” }, 命令：“TLB-删除” },{ 属性：{ 职业：“法发装备” }, 命令：E => { alert（“嗨”） } }] ``` 当我在浏览器控制台上运行这段代码时，它正常工作，但当我把这段代码放到组件文件时，当我们为所有组件定义一个新的特征时，它就无法正常工作了。工具栏里它不工...

回答（2）

artf• 2021年1月27日

按照问题模板（版本、实时演示等）操作。

GJSBlock• 2026年5月17日

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

在 GitHub 上查看完整讨论 →