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. 自定义高亮及主题

示例:

<template>
  <div ref="editor" class="editor-box" />
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
import 'monaco-editor/esm/vs/basic-languages/java/java.contribution';

export default defineComponent({
  mounted() {
    // 注册日志语言
    monaco.languages.register({ id: 'log-viewer' })

// 语义分词规则定义
    monaco.languages.setMonarchTokensProvider('log-viewer', {
      tokenizer: {
        root: [

          // 错误级别识别
          [/\bERROR\b/, 'error-level'],
          [/\bFATAL\b/, 'error-level'],
          [/\bWARN\b/, 'warn-level'],
          [/\bINFO\b/, 'info-level'],
          [/.+\bDEBUG\b.+/, 'debug-level'],

          // 时间戳识别
          [/\d{4}-\d{2}-\d{2}\s\d{2}:\d{2}:\d{2}(\.\d+)?/, 'timestamp'],

          // 线程
          [/\[.*?]/, 'thread'],

          // 类
          // [/(\w+\.){2,}\w+/, 'className'],

          // 异常堆栈
          [/\s+at.+/, 'exception-stack'],

          // 网络相关识别
          [/(https?:\/\/\S+)/, 'url'],
          [/\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}/, 'ip'],

          // 数据结构识别
          [/\b[a-f0-9]{8}-[a-f0-9]{4}-[a-f0-9]{4}-[a-f0-9]{4}-[a-f0-9]{12}\b/, 'uuid'],
          [/(\{[\s\S]*?\}|\[[\s\S]*?\])/, 'json']
        ]
      }
    });

// 主题配置
    monaco.editor.defineTheme('log-theme', {
      base: 'vs-dark',
      inherit: true,
      rules: [
        { token: 'exception-stack', foreground: '#CE9178',  },
        { token: 'timestamp', foreground: '#BCBEC4',  },
        { token: 'thread', foreground: '#BCBEC4',  },
        // { token: 'className', foreground: '#02A2A2',  },
        { token: 'error-level', foreground: '#FF6B6B',  },
        { token: 'warn-level', foreground: '#FFA500' },
        { token: 'info-level', foreground: '#5A952A' },
        { token: 'debug-level', foreground: '#777F7F' },
        { token: 'url', foreground: '#6A9955', fontStyle: 'underline' },
        { token: 'ip', foreground: '#D7BA7D' },
        { token: 'status-code', foreground: '#C586C0' },
        { token: 'uuid', foreground: '#CE9178' }
      ],
      colors: { 'editor.background': '#1E1E1E' }
    });
    monaco.editor.create(this.$refs.editor as HTMLElement, {
      value: `\
2025-10-23 19:30:28.988 [main] INFO  com.alibaba.druid.pool.DruidDataSource - {dataSource-1} inited
2025-10-23 19:30:28.991 [main] INFO  o.s.c.s.PostProcessorRegistrationDelegate$BeanPostProcessorChecker - Bean 'dataSource' of type [com.alibaba.druid.spring.boot.autoconfigure.DruidDataSourceWrapper] is not eligible for getting processed by all BeanPostProcessors (for example: not eligible for auto-proxying)
2025-10-23 19:30:29.011 [main] DEBUG o.s.b.factory.support.DefaultListableBeanFactory - Autowiring by type from bean name 'sqlSessionFactory' via factory method to bean named 'dataSource'
2025-10-23 19:30:29.032 [main] DEBUG o.s.b.factory.support.DefaultListableBeanFactory - Creating shared instance of singleton bean 'fieldMetaObjectHandler'
2025-10-23 19:30:29.036 [main] INFO  o.s.c.s.PostProcessorRegistrationDelegate$BeanPostProcessorChecker - Bean 'fieldMetaObjectHandler' of type [com.labwind.common.handler.FieldMetaObjectHandler] is not eligible for getting processed by all BeanPostProcessors (for example: not eligible for auto-proxying)
      `,
      language: 'log-viewer',
      readOnly: true,
      automaticLayout: true,
      theme: 'log-theme',
      minimap: {
        enabled: true,
      },
    });
  }
});
</script>
<style lang="scss">
.editor-box {
  width: 100vw;
  height: 100vh;
}
</style>

参考:

• 云舟观测：基于Monaco Editor的万行级日志在线浏览方案 (opens new window)

4. 常用功能

4.1. 监控文件内容变化

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

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

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