代码编辑器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 id="container" 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); 
});