Monaco 支持更纯净的代码编辑器,StandaloneCodeEditor
也是因为是默认的Editor的子组件,导致丢失了许多Editor的方法,尤其是对于快捷键相关的处理Api
如果使用的是Editor实例, 建议查看这个issue,
基本上是可以满足需求的。
对于StandaloneCodeEditor,就无法使用issue中提及的方法实现
主要需要使用以下两个api实现
addCommand
作用
可以为编辑器绑定快捷键
api
- addCommand(keybinding: number, handler: ICommandHandler, context?: string): string
详解
- keybinding, 这里则是需要参考monaco.KeyCode 与 monaco.KeyMod俩个枚举
KeyCode主要是包含各种键值,KeyMod包含ctrl等特殊键,例如CtrlCmd同时对应着win、linux的ctrl键和mac的command键
然后对于组合键,采用或的方法连接,例如ctrl+s 为monaco.KeyMod.CtrlCmd | monaco.KeyMod.KeyS。具体按照版本可能属性命名不一样,但是或的连接方法不变
具体底层原理可以自行百度,有人提供讲解 - handler, 事件处理函数
addAction
作用
可以同时为编辑器绑定快捷键,同时注册为action,支持在右键菜单的Command Palette内搜索到,也可以使用trigger方法触发,相当于注册为一个更完整的快捷键事件,而非简单监听键盘事件
api
- addAction(descriptor: IActionDescriptor): IDisposable
详解
参考以下例子
editor.addAction({
id: "editor.action.insertLineBefore",
keybindings: [MonacoType.KeyMod.CtrlCmd | MonacoType.KeyMod.Shift | MonacoType.KeyCode.Enter],
label: "Run All",
run: () => onQuerySQL({ runType: "ALL" }),
});
核心的几个属性就是
- id , string类型 action的唯一id、
- keybindings,number数组类型,数组内容为绑定的快捷键值,可以配置多个快捷键选项
- label. 定义action的名称,会在Command Palette展示搜索得到
- run, 触发事件函数
注意,我这里添加的action的id是编译器原本自带的。因为这里的目的是覆盖自带的action快捷键事件
如果希望完全覆盖默认快捷键行为,不能使用addCommand,因为addCommand只能覆盖快捷键监听事件,不能覆盖Command Palette里的action事件,当然你希望保留也可以()
附带
默认action id列表