vue使用monaco-editor构建代码编辑器

1.安装monaco-editor

npm install monaco-editor -S

2.初始化编辑器,注意需要使用esm下的文件

<template>
  <div ref="contentRef" class="content" id="content"></div>
</template>

<script>
// import * as monaco from 'monaco-editor/esm/vs/editor/editor.api.js';
import * as monaco from 'monaco-editor';
export default {
  name: 'EditorIndex',
  data() {
    return {
      editor: null
    }
  },
  methods: {
    init() {
      this.editor = monaco.editor.create(this.$refs.contentRef, {
        value: '',
        language: 'javascript'
      })
    },
    getEditor() {
      return this.editor
    }
  },
  mounted() {
    this.init()
  }
}
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  height: 100%;
}
</style>

注意： 如果遇到相似错误，需要使用esm下的文件

3.设置编辑器的内容

this.editor.setValue(txt)

4.获取编辑器的值

let value = this.editor.getValue()