monaco-editor - 代码编辑器

1. 介绍

在 vue3 中使用 代码编辑器 编辑 JS 文件

2. 快速开始

安装:

npm i monaco-editor

# "monaco-editor": "^0.50.0",

使用:

<template>
  <div ref="editor" class="editor-box" />
</template>
<style>
.editor-box {
  width: 100vw;
  height: 100vh;
}
</style>
<script>
import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
import 'monaco-editor/esm/vs/basic-languages/javascript/javascript.contribution';

export default {
  mounted() {
    monaco.editor.create(this.$refs.editor, {
      value: content,
      language: 'javascript',

      automaticLayout: true,
      minimap: {
        enabled: false,
      },
    });
  }
}
</script>

3. 常用功能

3.1. 监控文件内容变化

import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';

const editor = monaco.editor.create(/*...*/);

// 当文件内容变化时触发
editor.onDidChangeModelContent(() => {
  // 获取编辑器的内容
  const modifiedContent = editor.getValue();
});