vue使用monaco-editor的demo

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

vue使用monaco-editor的demo

test.vue

<template>
  <div id="container" style="height: 1000px"></div>
</template>
<script>
import * as monaco from 'monaco-editor'
export default {
  data() {
    return {
      editor: null// 文本编辑器
    }
  },
  mounted() {
    this.initEditor()
  },
  methods: {
    initEditor() {
      // 初始化编辑器，确保dom已经渲染
      this.editor = monaco.editor.create(document.getElementById('container'), {
        // 编辑器初始显示文字
        value: '',
        // 语言支持自行查阅demo
        language: 'python',
        // 自动布局
        automaticLayout: true,
        // 方自带三种主题vs, hc-black, or vs-dark
        theme: 'vs-dark'
      }
      )
    },
    getValue() {
      this.editor.getValue() // 获取编辑器中的文本
    }
  }
}
</script>