代码编辑器monaco-editor用法入门

monaco editor是微软开源的一款web版代码编辑器。它支持智能提示，代码高亮，代码格式化。

这里简单介绍下它的用法。

1、下载安装monaco-editor

npm install monaco-editor

下载后，安装目录为node_modules/monaco-editor/。

2、添加loader.js脚本到页面

在集成monaco-editor的页面，添加

<script src="monaco-editor/min/vs/loader.js"></script>

注意脚本的相对路径，根据实际情况修改。monaco-editor使用的是vs的loader.js加载。

3、集成到页面

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
</head>
<body>
<div  style="width:800px;height:600px;border:1px solid grey"></div>
<script src="monaco-editor/min/vs/loader.js"></script>
<script>
	require.config({ paths: { 'vs': 'monaco-editor/min/vs' }});
	require(['vs/editor/editor.main'], function() {
		var editor = monaco.editor.create(document.getElementById('container'), {
			value: [
				'function x() {',
				'\tconsole.log("Hello world!");',
				'}'
			].join('\n'),
			language: 'javascript'
		});
	});
</script>
</body>
</html>

id为container的div为monaco编辑器插入的位置。

配置路径别名

require.config({ paths: { 'vs': 'monaco-editor/min/vs' }});

require.config配置了monaco-editor的安装路径，使用vs作为别名。在后续的引用脚本里不需要再写长的相对路径。

加载editor.main依赖

require(['vs/editor/editor.main'], function() {
  ....
});

路径里的vs为require.config配置的别名，editor.main为编辑器的主入口。这里添加了依赖editor.main，并加载。function(){}，为加载editor.main完成后的回调函数。

创建editor实例

var editor = monaco.editor.create(document.getElementById('container'), {
			value: [
				'function x() {',
				'\tconsole.log("Hello world!");',
				'}'
			].join('\n'),
			language: 'javascript'
		});

monaco.editor.create创建了editor实例。

create接口定义如下：

create(domElement: HTMLElement, options?: IEditorConstructionOptions, override?: IEditorOverrideServices): IStandaloneCodeEditor

create有三个参数:

domElement：绑定的dom元素
options：可选，配置编辑器的参数，如编辑器的初始内容value，代码的编程语言language。
override：可选。

示例里创建了一个javascript的脚本编辑器。

4、设置或获取编辑器的值

设置值：

editor.setValue("function func(){\nconsole.log("hello"\n}");

获取代码内容

editor.getValue()

5、监听事件

监听内容被修改：onDidChangeModelContent

editor.onDidChangeModelContent((e) => { 
   console.log(e)   
});

监听blur事件

editor.onDidBlurEditor((e) => { 
     console.log(e); 
});

有关编辑器接口更多的事件方法参考IStandaloneCodeEditor

秒客网