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

前言

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

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

一、安装相关插件

pnpm add monaco-editor pnpm add monaco-editor-vue3

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

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

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

<template> <div style="height: 400px; width: 800px"> <CodeEditorv-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文件并添加以下配置内容

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

import App from './App.vue'; import '@/utils/monaco' type AppInstance = AppType<Element>; const app: AppInstance = createApp(App); app.mount('#app');

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

自定义主题

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

依旧在monaco.ts中添加代码

// 定义符合项目系统的自定义主题 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 完整的配置

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);