教大家怎么看monaco-editor的官方文档

深藏阁楼爱情的钟 2023-10-09 18:14 30阅读 0赞

最近业务中有用到浏览器在线编辑器，用的是monaco-editor，官网文档只在首页介绍了npm安装方式。![9c49bf2b12f2459481d3dc3ca33dc454.png][]

但其实还有另外一种<script>的引入方式，但是这种方式体现在API文档中，由于API文档晦涩难懂，大家也没注意到，就会导致直接就使用了第一种方案，但是由于第一种方案在打包的时候会导致包的体积变大很多，所以为了性能考虑，推荐第二种引入方案。

在F12控制台输入window.monaco查看，可以看到window对象下被成功挂上了一个monaco对象。

![7a096589e636aec35e3ac0421d45d18a.png][]

然后再举个简单运用在vue的实例如下：

<template>
      <div id="monaco-editor-wrapper"></div>
    </template>
    
    <script>
    export default {
      mounted() {
        window.addEventListener('resize', () => {
          if (this.$editorInstance) {
            this.$editorInstance.layout();
          }
        });
      },
      data() {
        return {
          $editorInstance: null,
        };
      },
      methods: {
        init() {
          if (this.$editorInstance) {
            return;
          }this.$editorInstance = window.monaco.editor.create(document.getElementById('monaco-editor-wrapper'), {
            value: '',
            language:'python',
          });
        },
    }

但是我在网上看很多人说看不懂它的官方文档，一是因为文档是全英文的，没有汉化，二也确实是因为monaco文档写的没有vue官方文档那么详细，没有例子，就一段描述，给了源码定义的位置，让人摸不着头脑。授人与鱼，不如授人与渔，于是就有了这篇文章，这篇文章主要教大家怎么看官方文档，并对其中最主要也是最基本的方法进行讲解，但是对于文档中其他具体方法所实现的什么功能本篇不过于讨论。

首先，先放上官方网址链接：https://microsoft.github.io/monaco-editor/。从这里的简介我们可以看出monaco-editor和大名鼎鼎的vscode的核心代码是一样的，本就是从同一个项目Monaco Workbench脱胎而出的。但是由于monaco-editor受到web平台的限制，所以功能和性能都没有vscode强大。简介中有争议的一点是：移动端的浏览器不支持monaco-editor，但是我觉得完全支持啊，难道safari不支持？可惜我是个安卓用户，有条件有空有兴趣的大佬可以测试下。

![084b54521a952fec5b38b00cf797d5d9.png][]

然后我们点开API文档，就拿上面那个最简单的实例来举例，一般我们都是会对monaco对象提供的api进行定制，所以点击monaco。

![be42aaab0c2b6a53ba5afe4925915edb.png][]

monaco下有三个属性：editor、language和worker，由于前两个属性会用的比较多，所以这里会主要讲前两个属性。

![814d71677f87751c64ac2d4a966b9b10.png][]

#### 1.editor与编辑器相关的一些API，比如着色(colorize)，创建编辑器(create)，创建模型(createModel)，定义主题(defineTheme)，注册命令(registerCommand)等。 ####

![ba71e763fa8ae05d70a137115923296a.png][]

点进去，略过Enumerations（枚举）、Classes（类）、Interfaces（接口）、Type aliases（类型别名）、Events（事件）、Variables（变量）拉到下面，找到Function（功能）部分，主要是看create()，这个方法会在创建编辑器的时候初始化部分功能，这些功能在options里配置。

![3e39c0b088d1f37e06363a8dc35a810e.png][]

![91d6e13b80723fea18b0d0dc1dd36fb2.png][]

点开具体参数，会有它的枚举值。如果不知道这个参数具体是干什么的，可以点开源代码Defined定义链接去看，里面注释的参数用途还是比较清楚的。

![d9213ef2ba283abb8f601f6c834f4618.png][]

#### 2.language与编辑器自定义语言相关的API。 ####

![ed90e3ec496b155d3e0a30b2f1f30286.png][]

目前monaco-editor内置有61种语言，但是只对这四种语言css，html，json，typescript/javascript支持的功能也比较全，至于其他语言，你可以自己定制功能或语言。

![4733b1a559ee21b28bd101edbe235fe3.png][]

查看Function部分，主要看register()，这个方法会为你在编辑器内注册一个语言。

![728f8223ff5efe673b89399e51057c44.png][]

![0a0f3fdb9aa3eddde65c923188a4681a.png][]

点击查看language参数，有很多个：id，aliases，configuration，extensions等，但是查看源码定义，必输的只有一个id。

![2e9ba32576f281bb36da190b4dd5fc85.png][]

![9f7062366a6a9ed9bd4a22d37f07a513.png][]

在F12控制台自定义一个语言，可以看到，monaco现在支持62种语言，就是比之前61种自带语言多了一种我们自己定义的myLanguage。

![9815da84fac64bc2b451f3a3e06473fa.png][]

当然，仅仅只是注册了一个语言是没什么用的，还要为这个自定义语言添加token（setMonarchTokensProvider()）和联想提示（registerCompletionItemProvider()）才能使这个monaco-editor发挥基本的功能，这里就不一一展开了。

#### 3.worker与编辑器线程相关的API。 ####

给编辑器性能调优用的，我也没用过，看文档在IWorkerContext接口中可以获取镜像模型，懂行的大佬可以教教大家。

最后，monaco确实功能很强大，但这一切前提是建立在你配置正确的情况下，而且在你采用npm将它引入项目的话也会有性能问题的麻烦。如果仅仅是简单需求的情况下，建议也可以看看brace插件，轻量级，封装的是ACE在线编辑器，npm包地址：https://www.npmjs.com/package/brace?activeTab=readme，文档里也说明了为什么不直接使用ACE。当然了，功能没有那么monaco-editor那么全面，但是在现实世界的选择里，你很难，我全都要。

![0342dac85b1d9160470f70f4bd5a934d.png][]

[9c49bf2b12f2459481d3dc3ca33dc454.png]: https://img-blog.csdnimg.cn/9c49bf2b12f2459481d3dc3ca33dc454.png
[7a096589e636aec35e3ac0421d45d18a.png]: https://img-blog.csdnimg.cn/img_convert/7a096589e636aec35e3ac0421d45d18a.png
[084b54521a952fec5b38b00cf797d5d9.png]: https://img-blog.csdnimg.cn/img_convert/084b54521a952fec5b38b00cf797d5d9.png
[be42aaab0c2b6a53ba5afe4925915edb.png]: https://img-blog.csdnimg.cn/img_convert/be42aaab0c2b6a53ba5afe4925915edb.png
[814d71677f87751c64ac2d4a966b9b10.png]: https://img-blog.csdnimg.cn/img_convert/814d71677f87751c64ac2d4a966b9b10.png
[ba71e763fa8ae05d70a137115923296a.png]: https://img-blog.csdnimg.cn/img_convert/ba71e763fa8ae05d70a137115923296a.png
[3e39c0b088d1f37e06363a8dc35a810e.png]: https://img-blog.csdnimg.cn/img_convert/3e39c0b088d1f37e06363a8dc35a810e.png
[91d6e13b80723fea18b0d0dc1dd36fb2.png]: https://img-blog.csdnimg.cn/img_convert/91d6e13b80723fea18b0d0dc1dd36fb2.png
[d9213ef2ba283abb8f601f6c834f4618.png]: https://img-blog.csdnimg.cn/img_convert/d9213ef2ba283abb8f601f6c834f4618.png
[ed90e3ec496b155d3e0a30b2f1f30286.png]: https://img-blog.csdnimg.cn/img_convert/ed90e3ec496b155d3e0a30b2f1f30286.png
[4733b1a559ee21b28bd101edbe235fe3.png]: https://img-blog.csdnimg.cn/img_convert/4733b1a559ee21b28bd101edbe235fe3.png
[728f8223ff5efe673b89399e51057c44.png]: https://img-blog.csdnimg.cn/img_convert/728f8223ff5efe673b89399e51057c44.png
[0a0f3fdb9aa3eddde65c923188a4681a.png]: https://img-blog.csdnimg.cn/img_convert/0a0f3fdb9aa3eddde65c923188a4681a.png
[2e9ba32576f281bb36da190b4dd5fc85.png]: https://img-blog.csdnimg.cn/img_convert/2e9ba32576f281bb36da190b4dd5fc85.png
[9f7062366a6a9ed9bd4a22d37f07a513.png]: https://img-blog.csdnimg.cn/img_convert/9f7062366a6a9ed9bd4a22d37f07a513.png
[9815da84fac64bc2b451f3a3e06473fa.png]: https://img-blog.csdnimg.cn/img_convert/9815da84fac64bc2b451f3a3e06473fa.png
[0342dac85b1d9160470f70f4bd5a934d.png]: https://img-blog.csdnimg.cn/img_convert/0342dac85b1d9160470f70f4bd5a934d.png