其他分享
首页 > 其他分享> > 教大家怎么看monaco-editor的官方文档

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

作者:互联网

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

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.34.0/min/vs/loader.js"></script>
<script>
  require.config({
    paths: {
      vs: 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.34.0/min/vs/',
    },
  });
  window.MonacoEnvironment = {
    getWorkerUrl: function (workerId, label) {
      return `data:text/javascript;charset=utf-8,${encodeURIComponent(`
            self.MonacoEnvironment = {
              baseUrl: 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.34.0/min/'
            };
            importScripts('https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.34.0/min/vs/base/worker/workerMain.js');`)}`;
    },
  };
  require(['vs/editor/editor.main'], function () {});
</script>

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

  然后再举个简单运用在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不支持?可惜我是个安卓用户,有条件有空有兴趣的大佬可以测试下。

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

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

1.editor

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

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

  红框1部分是说明了create方法的参数,及红框2中Parameter的部分,有domElement,options及override。一般只用到前两个,可以参考我前面的vue小实例,domElement就是monaco-editor在dom上的节点,而options就是功能参数选项,点开红框3,就可以看到所有的options参数。

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

2.language

  与编辑器自定义语言相关的API。

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


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

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

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

  当然,仅仅只是注册了一个语言是没什么用的,还要为这个自定义语言添加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那么全面,但是在现实世界的选择里,你很难,我全都要。

 

标签:功能,编辑器,API,文档,editor,monaco
来源: https://www.cnblogs.com/jdWu-d/p/16599548.html