Vue使用monaco-editor代码编辑器组件（查找定位，代码高亮，自定义右键，各种监听事件）

Vue使用monaco-editor组件

安装初始化项目

// 使用的稳定版本配套
cnpm install monaco-editor@0.30.1
cnpm install monaco-editor-webpack-plugin@6.0.0

vue.config.js

const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin')
...
plugins: [
    new MonacoWebpackPlugin()
]

在组件中进行使用

<template>
  <div ref="editorContainer" class="editor"></div>
</template>

<script>
    import * as monaco from 'monaco-editor'
    export default {
   
        name: 'MonacoEditor',
    },
    data() {
   
        return {
   
          code: '',
          editor: null,
        }
    },
    mounted() {
   
        this.init()
    },
    methods: {
   
        init(){
   
          // 初始化编辑器
          this.editor = monaco.editor.create(this.$refs.editorContainer, {
   
            value: this.code,
            language: 'java',
            tabSize: