Vite 构建的 Vue3 项目如何整合 Monaco Editor 代码编辑器

本文主要是介绍Vite 构建的 Vue3 项目如何整合 Monaco Editor 代码编辑器，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

🦁 一. 前言

各位好！我是🦁，好久不写，可还安好？
前面在写一个项目的时候需要使用到在线代码编辑器，选用了微软研发的 Monaco Editor，但是由于官网教程有点难看懂，所以整合的时候遇到了不少麻烦！现在总结一下！

🦁 二. 探索过程

2.1 安装

首先，在 Vite 项目中通过命令行安装 Monaco Editor，命令如下：

 npm install monaco-editor

2.2 配置 Monaco Editor

通过命令配置 Monaco Editor，指定它的加载路径和其他配置项，咱们依据官网教程，通过安装 vite-plugin-monaco 插件来完成这一过程。

npm install vite-plugin-monaco

然后在配置文件使用该插件：

import ViteMonacoPlugin from 'vite-plugin-monaco-editor'export default defineConfig({plugins: [vue(),ViteMonacoPlugin({}),],
});

这个插件将配置 Monaco Editor 的加载路径，并将相关文件添加到你的项目中。

2.3 编写 Monaco Editor 代码编辑器

为了方便编辑器更方便使用，选择将其封装成一个组件，复用简单，并且代码更易于维护。

2.3.1 创建 Coding Editor 组件

在这里插入图片描述

<template><div ref="editorContainer" style="height: 400px;"></div>
</template><script setup>
import * as monaco from 'monaco-editor';	// 全部导入
import { ref, onMounted } from 'vue';export default {props: {value: String,language: String,},setup(props) {const editor = ref(null);onMounted(() => {editor.value = monaco.editor.create(document.getElementById('editorContainer'), {value: props.value || '',language: props.language || 'java',minimap: {				enabled: true,},colorDecorators: true,		//颜色装饰器readOnly: false,			//是否开启已读功能theme: "vs-dark",			//主题});// 监听编辑器内容变化editor.value.onDidChangeModelContent(() => {// 触发父组件的 change 事件，通知编辑器内容变化props.onChange(editor.value.getValue());});});return {editor,};},
};
</script>

MonacoEditor 组件接收 value 和 language 作为 props，并通过 @change 事件通知父组件编辑器内容的变化。

2.3.2 父组件使用 CodingEditor 组件

<template><div><CodingEditor :value="code" :language="language" @change="handleEditorChange" /></div>
</template><script setup>
import CodingEditor from '@/component/CodingEditor/index.vue'
import { ref } from 'vue';export default {components: {CodingEditor,},setup() {const code = ref('console.log("Hello, Monaco Editor!");');const language = ref('javascript');// 处理编辑器内容变化的方法const handleEditorChange = (value) => {console.log('Editor content changed in parent component:', value);};return {code,language,handleEditorChange,};},
};
</script>