Vue3项目集成monaco-editor实现浏览器IDE代码编辑功能

答案answer2025-12-12 10:48

前言

相信大家在做一些低代码平台的项目时，都会涉及到一些在线IDE代码编辑的功能吧，比如通过在线代码编辑后实现在线运行代码效果.

本篇给大家分享一下作者个人在开发低代码平台时如何实现如下图所示的vscode在线代码IDE编辑功能的吧

一、安装相关插件

js 复制代码 
pnpm add monaco-editor 
pnpm add monaco-editor-vue3

因为是在Vue3项目中所以这里直接使用 monaco-editor-vue3 这个插件会更加便捷

二、新增一个monaco.ts 配置文件（这个很重要）

在安装完插件后其实我们这样直接在页面中引入就可以使用了，但是这个时候页面其实会有报错的，大概就是提示你monaco-editor 相关配置没有处理

js 复制代码 
<template>
  <div style="height: 400px; width: 800px">
    <CodeEditor
      v-model:value="code"
      language="javascript"
      theme="vs-dark"
      :height="600"
      :options="editorOptions"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { CodeEditor } from 'monaco-editor-vue3';

const code = ref(`function hello() {
console.log('Hello, Monaco Editor!');
}`);

const editorOptions = {
  fontSize: 14,
  minimap: { enabled: false },
  automaticLayout: true,
};
</script>

这时候我们需要创建一个 monaco.ts 文件并添加以下配置内容

js 复制代码 
import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker';
import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker';
import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';
import * as monaco from 'monaco-editor';

declare global {
  interface Window {
    MonacoEnvironment?: {
      getWorker: (moduleId: string, label: string) => Worker;
    };
  }
}

(self as Window).MonacoEnvironment = {
  getWorker(_: string, label: string) {
    if (label === 'json') {
      return new jsonWorker();
    }
    if (label === 'css' || label === 'scss' || label === 'less') {
      return new cssWorker();
    }
    if (label === 'html' || label === 'handlebars' || label === 'razor') {
      return new htmlWorker();
    }
    if (label === 'typescript' || label === 'javascript') {
      return new tsWorker();
    }
    return new editorWorker();
  },
};

同时在 main.ts 中引入 monaco.ts

js 复制代码 
import App from './App.vue';
import '@/utils/monaco'

type AppInstance = AppType<Element>;

const app: AppInstance = createApp(App);
app.mount('#app');

界面：ok配置成功后界面内容大概就是这样

自定义主题

如果你觉得编辑器默认的主题样式不太好看也可以自定义主题样式，这里简单的配置一下

依旧在monaco.ts中添加代码

js 复制代码 
// 定义符合项目系统的自定义主题
const customTheme: monaco.editor.IStandaloneThemeData = {
  base: 'vs-dark', // 基于官方暗色主题
  inherit: true, // 继承默认语法高亮规则
  rules: [
    { token: 'comment', foreground: '617b91', fontStyle: 'italic' }, // 注释呈现斜体灰蓝
    { token: 'keyword', foreground: 'c5cceb', fontStyle: 'bold' }, // 关键字加粗淡紫
    { token: 'string', foreground: 'a9b1d6' }, // 字符串淡蓝
    { token: 'number', foreground: 'c5cceb' }, // 数字淡紫
    { token: 'operator', foreground: 'c7cacf' }, // 运算符浅灰
    { token: 'delimiter', foreground: 'c7cacf' }, // 分隔符浅灰
    { token: 'type', foreground: 'c5cceb' }, // 类型标识淡紫
    { token: 'class', foreground: 'c5cceb' }, // 类名淡紫
    { token: 'function', foreground: 'a9b1d6' }, // 函数名淡蓝
    { token: 'variable', foreground: 'c5cceb' }, // 变量名淡紫
  ],
  colors: {
    'editor.background': '#252837', // 编辑器背景
    'editor.foreground': '#c5cceb', // 默认前景文字
    'editor.lineHighlightBackground': '#29344c', // 当前行高亮背景
    'editor.inactiveSelectionBackground': 'rgba(69, 137, 255, 0.15)', // 未激活选区背景
    'editorCursor.foreground': '#c5cceb', // 光标颜色
    'editorWhitespace.foreground': '#535f79', // 空白字符提示色
    'editorIndentGuide.background': '#535f79', // 缩进指示线
    'editorIndentGuide.activeBackground': '#a9b1d6', // 活动缩进指示线
    'editorLineNumber.foreground': '#617b91', // 行号默认颜色
    'editorLineNumber.activeForeground': '#c5cceb', // 当前行号颜色
    'editorGutter.background': '#252837', // 行号区域背景
    'editorWidget.background': '#29344c', // 弹出组件背景
    'editorWidget.border': '#535f79', // 弹出组件边框
    'editorSuggestWidget.background': '#29344c', // 智能提示背景
    'editorSuggestWidget.border': '#535f79', // 智能提示边框
  },
};

// 注册自定义主题
monaco.editor.defineTheme('custom-dark', customTheme);

界面效果：

monaco.ts 完整的配置

js 复制代码 
import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker';
import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker';
import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';
import * as monaco from 'monaco-editor';
declare global {
  interface Window {
    MonacoEnvironment?: {
      getWorker: (moduleId: string, label: string) => Worker;
    };
  }
}
(self as Window).MonacoEnvironment = {
  getWorker(_: string, label: string) {
    if (label === 'json') {
      return new jsonWorker();
    }
    if (label === 'css' || label === 'scss' || label === 'less') {
      return new cssWorker();
    }
    if (label === 'html' || label === 'handlebars' || label === 'razor') {
      return new htmlWorker();
    }
    if (label === 'typescript' || label === 'javascript') {
      return new tsWorker();
    }
    return new editorWorker();
  },
};
// 定义符合项目系统的自定义主题
const customTheme: monaco.editor.IStandaloneThemeData = {
  base: 'vs-dark', // 基于官方暗色主题
  inherit: true, // 继承默认语法高亮规则
  rules: [
    { token: 'comment', foreground: '617b91', fontStyle: 'italic' }, // 注释呈现斜体灰蓝
    { token: 'keyword', foreground: 'c5cceb', fontStyle: 'bold' }, // 关键字加粗淡紫
    { token: 'string', foreground: 'a9b1d6' }, // 字符串淡蓝
    { token: 'number', foreground: 'c5cceb' }, // 数字淡紫
    { token: 'operator', foreground: 'c7cacf' }, // 运算符浅灰
    { token: 'delimiter', foreground: 'c7cacf' }, // 分隔符浅灰
    { token: 'type', foreground: 'c5cceb' }, // 类型标识淡紫
    { token: 'class', foreground: 'c5cceb' }, // 类名淡紫
    { token: 'function', foreground: 'a9b1d6' }, // 函数名淡蓝
    { token: 'variable', foreground: 'c5cceb' }, // 变量名淡紫
  ],
  colors: {
    'editor.background': '#252837', // 编辑器背景
    'editor.foreground': '#c5cceb', // 默认前景文字
    'editor.lineHighlightBackground': '#29344c', // 当前行高亮背景
    'editor.inactiveSelectionBackground': 'rgba(69, 137, 255, 0.15)', // 未激活选区背景
    'editorCursor.foreground': '#c5cceb', // 光标颜色
    'editorWhitespace.foreground': '#535f79', // 空白字符提示色
    'editorIndentGuide.background': '#535f79', // 缩进指示线
    'editorIndentGuide.activeBackground': '#a9b1d6', // 活动缩进指示线
    'editorLineNumber.foreground': '#617b91', // 行号默认颜色
    'editorLineNumber.activeForeground': '#c5cceb', // 当前行号颜色
    'editorGutter.background': '#252837', // 行号区域背景
    'editorWidget.background': '#29344c', // 弹出组件背景
    'editorWidget.border': '#535f79', // 弹出组件边框
    'editorSuggestWidget.background': '#29344c', // 智能提示背景
    'editorSuggestWidget.border': '#535f79', // 智能提示边框
  },
};
// 注册自定义主题
monaco.editor.defineTheme('custom-dark', customTheme);

总结

以上就是作者个人在Vue3项目中集成 monaco.editor 的过程

总体来说也是非常的简单

大概就是分三步流程实现

1.安装 monaco-editor 和 monaco-editor-vue3 插件

2.新增和引入 monaco.ts 文件

3.在页面中使用 CodeEditor

github.com/microsoft/m...

github.com/bazingaedwa...

相关推荐
用户0595401744620 分钟前
把 Redis 持久化测试从 800 行 Shell 换成 30 行 pytest，排错效率翻了 10 倍
前端·css
GISer_Jing24 分钟前
AI全栈工程师知识体系全景：从前后端核心架构到落地项目全拆解
前端·人工智能·后端·ai编程
Wect30 分钟前
深度剖析浏览器跨域问题
前端·面试·浏览器
陈随易44 分钟前
bun将会支持Bun.image，你怎么看？
前端·后端·程序员
jingqingdai31 小时前
别用正则格式化 HTML！我用 DOM 遍历实现零风险本地格式化，老项目重构效率直接拉满
前端·重构·html
木斯佳1 小时前
前端八股文面经大全：腾讯前端实习二、三OC面（2026-04-27）·面经深度解析
前端·状态模式
Python私教1 小时前
如意Agent日志系统重构：从 print() 大海捞针到结构化可观测性栈
java·前端·重构
We་ct2 小时前
LeetCode 97. 交错字符串：动态规划详解
前端·算法·leetcode·typescript·动态规划
Chengbei112 小时前
轻量化 Web 安全日志分析神器 星川智盾日志威胁检测、地理溯源、MITRE ATT&CK 映射，支持 Windows/macOS/Linux
前端·人工智能·安全·web安全·macos·系统安全·安全架构
热门推荐
01要裂开了！ChatGPT要手机号验证了？注册Codex要求验证电话号码怎么办？2026年登陆Codex要手机号验证的解决办法02GitHub 镜像站点03【AI】2026 年具身智能模型和世界模型总结04裂开！ChatGPT 居然开始要手机号验证，附详细解决方法05Codex 接入 DeepSeek API 完整配置文档062026年AI前瞻：量子AI、具身智能与科学发现的新纪元07零基础教你claude code 接入 deepseek V408在Windows 11上安装Docker的踩坑记录09实测可用｜小米 MiMo 百万亿 Token 免费领，开发者速冲102026年4月AI大事件深度解读：大模型竞争进入“深水区“