按分类浏览
GrapesJS 指挥
GrapesJS 命令插件为编辑器添加自定义动作、键盘快捷键和工具栏按钮。命令是 GrapesJS 交互的骨架——这类插件在默认命令集之上扩展出导出动作、面板开关、撤销增强与工作流自动化。浏览社区贡献与付费的命令扩展,按你具体应用的需要定制编辑器行为。
关于 GrapesJS 指挥
GrapesJS 命令是以编程方式或响应用户交互来触发编辑器动作的主要途径。GrapesJS 中每个工具栏按钮、键盘快捷键和右键菜单项都会按名称调用一个已注册的命令。GJS.Market 上的命令插件从多个方向扩展默认命令集。快捷键包为常用操作注册键位绑定——撤销、重做、全选、复制组件、原位粘贴,以及在图层层级中上移或下移——这些默认并未映射。导出类命令插件为工具栏加入导出 HTML、导出 ZIP、复制到剪贴板和在新标签页预览等动作。面板开关命令可编程地显示或隐藏特定面板,适合精简版编辑器模式。进阶命令插件实现多步骤工作流,例如一个「发布」命令依次完成校验、导出并推送到 API。GJS.Market 上所有命令插件都附带 API 参考,列出可在你自己的 GrapesJS.runCommand() 调用中使用的命令名称字符串。
GrapesJS 指挥 — 常见问题
- 什么是 GrapesJS 命令?
- 命令是注册到编辑器上的具名动作。每个工具栏按钮、键盘快捷键和右键菜单项最终都指向某个命令,你也可以用 editor.runCommand('name') 自行触发。命令是界面与编辑器行为之间的接缝——正因如此,改变某个按钮的行为通常是注册命令,而不是去修改 DOM。
- 如何注册自定义命令?
- 调用 editor.Commands.add,传入 id 和一个包含 run 方法的对象;如果命令带状态(例如切换面板),再提供 stop 方法。run 的返回值会回传给调用方,因此命令也可以充当一个小型 API。把注册逻辑包进插件即可跨项目复用。
- 如何在 GrapesJS 中添加键盘快捷键?
- 使用 Keymaps API:editor.Keymaps.add 把组合键绑定到某个命令 id。GrapesJS 只映射了很小的默认集合,这正是本分类中快捷键包存在的原因——它们补上撤销、重做、全选、复制、原位粘贴与图层导航。请绑定到命令而非处理函数,这样同一动作仍可从工具栏触发。
- 如何从 GrapesJS 导出 HTML 和 CSS?
- editor.getHtml() 与 editor.getCss() 会把当前页面返回为字符串,内置的 export-template 命令则在弹窗中展示它们。本分类的插件更进一步:导出 ZIP 会把 HTML、CSS 与资源打包成可下载压缩包,复制到剪贴板跳过弹窗,在新标签页预览则独立渲染输出结果。
- 命令可以执行多步骤的发布流程吗?
- 可以,而且这正是安放这类流程最合适的位置。run 方法可以是异步的,因此一个「发布」命令能够校验页面、调用 getHtml 与 getCss、向你的 API 发起 POST 并反馈结果——全部收在一个工具栏按钮之后。由于它是具名命令,同一流程还能从快捷键、你自己的代码或自动化测试中触发。
按标签浏览
command palettekeyboard shortcutsproductivitysearch建造工具device-managerdevices移动葡萄存储IndexedDB 存储IndexedDB Storage grapesjsstorage zip grapesjs火力基地储存葡萄开发者工具调试督察活动插件开发提示超级提示Grapesjs tooltip人工智能文本内容生成CSS 网格面包屑图层管理器图标网站建设者 Grapesjs自定义组件代码编辑器 Grapesjs邮件开发者 Grapesjs嗨文件上传统治者导游设计师模式剧本SVG 组件方法-绘制SVG 编辑器抽牌自定义方块export zip grapesjs发布网站解析器帖子CSS grapesjsParser PostCSS 插件 grapesjs解析器插件 GrapesjsZip Grapesjs自定义代码 Grapesjs自定义代码插件 GrapesjsHTML CSS Grapesjs