Monaco Editor API 使用范例

 

> [Monaco Editor](https://github.com/microsoft/monaco-editor) 是微软开发的一款开源在线代码编辑器。它是 [VSCode](https://code.visualstudio.com/) 的浏览器版本，<!--，其大部分源代码与 VSCode 相同。-->随着近年 VSCode 大热，Monaco Editor 也逐渐走红。目前虽未登上 Online Editor 领域的宝座，却也隐燃有超越<a οnclick="show_name('hide-1')">几位老前辈</a><span id="hide-1" style="display: none;">（指 CodeMirror, Ace 之流）</span>之势。

 

<script>

    var i = 0;

    function show_name(id) {

        i += 1;

        if (i%2 == 0) {

            document.getElementById(id).style.display = "none";

        } else {

            document.getElementById(id).style.display = "inline";

        }

    }

</script>

 

GitHub项目链接：<a href="https://github.com/luochang212/monaco-editor-demos" target="_blank">monaco-editor-demos</a>

 

<!-- 如果你需要制作在线代码编辑器，或者在浏览上做比较复杂的文字处理，那么你可能需要编辑器框架。它提供基础且难以正确实现的那部分功能，从而使开发者能够集中精力开发他们应用中的核心功能。Monaco Editor 就是一个比较有名的开源编辑器框架。 -->

 

通过阅读本文，你可以了解以下内容：

 

1. 如何下载 Monaco Editor

2. 如何标准化搭建 Monaco Editor

3. 如何寻找相关学习资源

4. 如何调用常用 API<!--（提供 Demo）-->

 

### 下载

 

新建项目文件夹，然后打开它：

 

```shell

$ mkdir my-application

$ cd my-application

```

 

接着下载 Monaco Editor：<!--以下命令会在当前目录下新建一个名为 `node_modules` 的文件夹:-->

 

```shell

$ npm install monaco-editor

```

 

### 搭建

 

本文提供了一个标准化的搭建方法，通过本文的方法搭建的 Monaco Editor 具有较强的功能扩展性。比如，如果你希望为应用添加多个编辑器，甚至文件管理系统，那么在本文提供的搭建方法之上，就可以直接添加这些新特性，从而避免不必要的踩坑。

 

本文提供两种搭建方法。

 

方法一：直接从[GitHub仓库](https://github.com/luochang212/monaco-editor-demos/tree/master/base)下载。

 

方法二：手动搭建。

 

下面说明了手动搭建的过程。

 

<!-- <details>

<summary><font color='red'>点击这里展开手动搭建方法</font></summary> -->

 

首先，在项目文件夹 `my-application&