Monaco StandaloneCodeEditor 编辑器 自定义快捷键

724 阅读2分钟

Monaco 支持更纯净的代码编辑器,StandaloneCodeEditor
也是因为是默认的Editor的子组件,导致丢失了许多Editor的方法,尤其是对于快捷键相关的处理Api
如果使用的是Editor实例, 建议查看这个issue, 基本上是可以满足需求的。
对于StandaloneCodeEditor,就无法使用issue中提及的方法实现
主要需要使用以下两个api实现

  1. addCommand
  2. addAction

addCommand

作用

可以为编辑器绑定快捷键

api

  • addCommand(keybinding: number, handler: ICommandHandler, context?: string): string

详解

  1. keybinding, 这里则是需要参考monaco.KeyCode 与 monaco.KeyMod俩个枚举
    KeyCode主要是包含各种键值,KeyMod包含ctrl等特殊键,例如CtrlCmd同时对应着win、linux的ctrl键和mac的command键
    然后对于组合键,采用或的方法连接,例如ctrl+s 为 monaco.KeyMod.CtrlCmd | monaco.KeyMod.KeyS。具体按照版本可能属性命名不一样,但是或的连接方法不变
    具体底层原理可以自行百度,有人提供讲解
  2. handler, 事件处理函数

addAction

作用

可以同时为编辑器绑定快捷键,同时注册为action,支持在右键菜单的Command Palette内搜索到,也可以使用trigger方法触发,相当于注册为一个更完整的快捷键事件,而非简单监听键盘事件

api

详解

参考以下例子


editor.addAction({
  id: "editor.action.insertLineBefore",
  keybindings: [MonacoType.KeyMod.CtrlCmd | MonacoType.KeyMod.Shift | MonacoType.KeyCode.Enter],
  label: "Run All",
  run: () => onQuerySQL({ runType: "ALL" }),
});

核心的几个属性就是

  1. id , string类型 action的唯一id、
  2. keybindings,number数组类型,数组内容为绑定的快捷键值,可以配置多个快捷键选项
  3. label. 定义action的名称,会在Command Palette展示搜索得到
  4. run, 触发事件函数

注意,我这里添加的action的id是编译器原本自带的。因为这里的目的是覆盖自带的action快捷键事件
如果希望完全覆盖默认快捷键行为,不能使用addCommand,因为addCommand只能覆盖快捷键监听事件,不能覆盖Command Palette里的action事件,当然你希望保留也可以()
附带 默认action id列表