vue中使用Monaco Editor代码编辑器记录

一、引入

下载地址：@monaco-editor
文档地址：Monaco Editor

npm install @monaco-editor/loader
// or
yarn add @monaco-editor/loader

二、使用

import loader from '@monaco-editor/loader'
loader.init().then(monaco => {
	// monaco.languages.getLanguages(); 支持的所有语言在这里可以看到
	const monacoElem = monaco.editor.create(this.$refs.xxx/*或document.getElementById('xxx')*/, {
		value: '你的代码',
		language: 'javascript' // 代码对应的语言，可查看文档
	})
})

三、常用方法

1、onDidChangeModelContent

捕捉编辑器修改的动作

monacoElem.onDidChangeModelContent(e => { // 监听修改
	console.log(e)
})

2、getValue

获取编辑器里的值，与之对应的就是setValue

monacoElem.getValue();
monacoElem.setValue('你的代码')

3、getSupportedActions

获取编辑器支持的操作，如格式化等等，配合getAction或者trigger使用

monacoElem.getSupportedActions();

4、getAction

获取可进行的操作，并执行当前操作，如下进行格式化

const formatAction = monacoElem.getAction('editor.action.formatDocument');
// editor.action.formatDocument：第三步getSupportedActions的操作可以查看
formatAction.run();

5、trigger

触发指定操作，如下：进行右键菜单展示及代码格式化

monacoElem.trigger('你自定义一个字符串', 'editor.action.showContextMenu'); // 展示右键菜单
monacoElem.trigger('你自定义一个字符串', 'editor.action.formatDocument'); // 代码格式化

6、updateOptions

更新属性

this.monacoElem.updateOptions({
  readOnly: true // 将编辑框修改为不可编辑(只读状态)
})

7、dispose

销毁

monacoElem.dispose()