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

<template>
  <div class="editor-container">
    <monaco-editor
      ref="monaco"
      :code="code"
      :theme="theme"
      :options="options"
      @mounted="onMounted"
      @codeChange="onCodeChange"
      @themeChange="onThemeChange"
    />
  </div>
</template>
 
<script>
import MonacoEditor from '@/components/MonacoEditor.vue'
 
export default {
  components: {
    MonacoEditor
  },
  data() {
    return {
      code: 'console.log("Hello, Monaco!");',
      theme: 'vs-dark',
      options: {
        minimap: {
          enabled: false
        },
        wordWrap: 'on',
        overviewRulerLanes: 0,
        selectOnLineNumbers: true,
        roundedSelection: false,
        readOnly: false,
        cursorStyle: 'line',
        glyphMargin: false,
        lineNumbersMinChars: 5,
        autoIndent: true
      }
    }
  },
  methods: {
    onMounted(editor) {
      // 编辑器挂载后的操作
      editor.focus();
    },
    onCodeChange(newCode) {
      // 代码改变时的操作
      console.log('Code changed:', newCode);
    },
    onThemeChange(newTheme) {
      // 主题改变时的操作
      console.log('Theme changed:', newTheme);
    }
  }
}
</script>
 
<style scoped>
.editor-container {
  width: 100%;
  height: 100%;
  position: relative;
}
</style>

这个代码示例展示了如何在Vue应用中集成monaco-editor组件，并处理一些基本的编辑器事件，如挂载、代码改变和主题改变。同时，展示了如何通过options来配置编辑器的外观和行为。