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">
    <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 文件并添加以下配置内容

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

总结

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

总体来说也是非常的简单

大概就是分三步流程实现

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

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

3.在页面中使用 CodeEditor

github.com/microsoft/m...

github.com/bazingaedwa...