背景
在一般的Web IDE中，我们需要将经常用到的一些操作放到顶部操作栏里，类似语雀的文档编辑。 代码编辑器，一般也会放一些查找，格式化，撤销，恢复。有些人喜欢用快捷键来进行这些操作，但由于monaco中内置的键盘快捷操作非常地多，所以有些人喜欢用按钮来实现某种操作。本篇文章就来带大家完成使用代码来触发某些action，完成点击一个按钮进行格式化，查找，显示右键菜单的操作。
核心方法
调用api来触发某个action或command，有二种方式，分别是
第一种：
直接使用editor.trigger(source: string, handlerId: string, payload: any): void来触发某个内置或已经自定义的操作。只要知道handerId就可以完成。
第二种：
先使用editor.getAction(id: string): IEditorAction方法获取action实例，然后调用实例的run(): Promise<void>方法。返回一个Promise。
先说第一种，直接使用trigger方法触发某个操作。传入一个handlerId，也可以添加一些额外的数据。常用的handlerId有，
editor.action.showContextMenu显示右键菜单actions.find查找操作editor.action.formatDocument格式化文档
具体使用方法
// 执行格式化操作editor.trigger('你自定义一个字符串', `editor.action.formatDocument`)// 执行查找操作，会显示查找框editor.trigger('你自定义一个字符串', `action.find`)
具体效果如下图：
第二种方案
传入一个 handlerId，就可以运行，
function getActionToTrigger(id){editor.getAction(id).run().then(() => {console.log('运行成功')})}// 触发查找操作getActionToTrigger('action.find')
默认的actions
上面提到了要触发某个操作，必须要知道该操作的handlerId，那么具体有哪些HandlerId供使用哪？
对于这个问题我也查了很多资料。也搜索了官方的文档和代码。都没找到。最后我在控制台打印出editor的原型对象。最后发现 editor下有一个_actions属性。这里存放了所有可用的handlerId。
具体请看。
根据资料可以得知，目前有154个action
完整代码
<!DOCTYPE html><html><head><title>Hello World Monaco Editor</title><meta http-equiv="Content-Type" content="text/html;charset=utf-8" /></head><body><h2>Hello World CSDN@拿我格子衫来 Monaco Editor</h2><button onclick="trigger('editor.action.showContextMenu')">显示右键</button><button onclick="trigger('actions.find')">查找</button><button onclick="trigger('editor.action.formatDocument')">格式化</button><button onclick="trigger('editor.action.gotoLine')">跳转至N行</button><button onclick="trigger('cursorUndo')">光标后退</button><button onclick="trigger('cursorRedo')">光标前进</button><button onclick="injectTriggerAction()">注入action并触发</button><button onclick="getActionToTrigger('actions.find')">获取id并触发</button><div id="container" style="width: 800px; height: 600px; border: 1px solid grey"></div><script src="./monaco-editor/package/min/vs/loader.js"></script><script src="./const.js"></script><script>require.config({paths: {vs: './monaco-editor/package/min/vs' } });let editorrequire(['vs/editor/editor.main'], function () {editor = monaco.editor.create(document.getElementById('container'), {value: oldVersion,language: 'javascript'});});function addCommand() {var fizzCommand = editor.createContextKey('fizzCommand', true);editor.addCommand(monaco.KeyMod.chord(monaco.KeyMod.CtrlCmd | monaco.KeyCode.End,), function () {const currentModel = editor.getModel()console.log(currentModel)const lineCount = currentModel.getLineCount()const valueLength = currentModel.getValueLength()const options = currentModel.getOptions()alert(`Fizz Command:行数: ${lineCount},内容长度: ${valueLength},`);}, 'fizzCommand');}function injectTriggerAction() {editor.addAction({// An unique identifier of the contributed action.id: 'fizz-action',// A label of the action that will be presented to the user.label: 'Fizz Action',// An optional array of keybindings for the action.keybindings: [monaco.KeyMod.CtrlCmd | monaco.KeyCode.F10,// chordmonaco.KeyMod.chord(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyK,monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyM)],// A precondition for this action.precondition: null,// A rule to evaluate on top of the precondition in order to dispatch the keybindings.keybindingContext: null,contextMenuGroupId: 'navigation',contextMenuOrder: 1.5,run: function (ed) {alert("i'm running => " + ed.getPosition());}});editor.trigger('你自定义一个字符串', 'fizz-action')}function trigger(commandId) {editor.trigger('你自定义一个字符串', commandId)}function getActionToTrigger(id){editor.getAction(id).run().then(() => {console.log('运行成功')})}</script></body></html>
总结
使用api来触发某个action，能够实现很多自动化操作。总之就是很牛X啊。
