Monaco Editor 是微软开源的基于 VS Code 的代码编辑器，运行在浏览器环境中。编辑器提供代码提示，智能建议等功能。供开发人员远程更方便的编写代码。

在做可视化平台的时候，之前用的是CodeMirror，但是发现功能相对来说还是没有Monaco Editor功能强大，毕竟VS Code是多么流行和强大，大家是有目共睹的，于是就有了替换编辑器的理由。

安装

npm install monaco-editor@0.21.2 --save
npm install monaco-editor-webpack-plugin --save //这个必须安装，不然起不来

配置

webpack.base.conf.js：

const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
...
 
module.exports = {
  ...
  plugins: [
    ...
    new MonacoWebpackPlugin()
  ]
};

或者
vue.config.js

const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin')
...
chainWebpack: config => {
  config.plugin('monaco-editor').use(MonacoWebpackPlugin, [
    {
      // Languages are loaded on demand at runtime
      languages: ['javascript', 'html', 'css', 'scss']
    }
  ])
}

封装

代码比较简单，就不过多解释了。

<template>
  <div class="monaco-editor" ref="editor" :style="style"></div>
</template>

<script>
//全部引入
import * as monaco from 'monaco-editor'
//按需引入
import * as monaco from 'monaco-editor/esm/vs/editor/editor.api'
import 'monaco-editor/esm/vs/basic-languages/html/html.contribution'
import 'monaco-editor/esm/vs/basic-languages/javascript/javascript.contribution'
import 'monaco-editor/esm/vs/basic-languages/css/css.contribution'
import 'monaco-editor/esm/vs/basic-languages/scss/scss.contribution'
import 'monaco-editor/esm/vs/editor/contrib/find/findController.js'
export default {
  name: 'monaco-editor',
  //引入组件
  props: {
    width: {
      type: [String, Number],
      default: '100%'
    },
    height: {
      type: [String, Number],
      default: '100%'
    },
    code: {
      type: String,
      default: '// code \n'
    },
    theme: {
      type: String,
      default: 'vs-dark' // vs, hc-black
    },
    language: {
      type: String,
      default: 'html'
    },
    options: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    //这里存放数据
    return {
      editor: null, //文本编辑器
      codeOptions: {
        value: this.code, //编辑器初始显示文字
        language: this.language, //语言支持自行查阅demo
        readOnly: true, //只读
        scrollBeyondLastLine: false, //底部代码不留白
        theme: this.theme, //官方自带三种主题vs, hc-black, or vs-dark
        roundedSelection: true,
        ...this.option
      }
    };
  },
  //监听属性 类似于data概念
  computed: {
    style() {
      const { width, height } = this;
      const fixedWidth = /(%|px)/.test(width) ? width : width + 'px';
      const fixedHeight = /(%|px)/.test(height) ? height : height + 'px';
      return {
        width: fixedWidth,
        height: fixedHeight
      };
    }
  },
  //监控data中的数据变化
  watch: {
    code: {
      handler(newName) {
        this.setValue(newName);
      }
    }
  },
  //方法集合
  methods: {
    initEditor() {
      // 初始化编辑器，确保dom已经渲染
      this.editor = monaco.editor.create(this.$refs.editor, this.codeOptions);
    },
    getValue() {
      this.editor.getValue(); //获取编辑器中的文本
    },
    setValue(val) {
      this.editor.setValue(val); //设置编辑器中的文本
    }
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.initEditor();
  },
  //生命周期 - 销毁完成
  destroyed() {
    this.editor.dispose();
  }
};
</script>

使用就不过多解释了，至于更多方法，就得去查下官方文档了。