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

Dear 丶 2024-05-01 16:30 69阅读 0赞

#### 目录 ####

*  🦁 一. 前言
 *  🦁 二. 探索过程
 *   *  2.1 安装
     *  2.2 配置 Monaco Editor
     *  2.3 编写 Monaco Editor 代码编辑器
     *   *  2.3.1 创建 Coding Editor 组件
         *  2.3.2 父组件使用 CodingEditor 组件
     *  2.4 效果展示
 *  🦁 三. 总结

![权限管理][299da6849a844e6881a91ce15d16239c.gif_pic_center]

## 🦁 一. 前言 ##

各位好！我是🦁，好久不写，可还安好？  
前面在写一个项目的时候需要使用到在线代码编辑器，选用了微软研发的 [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 组件 ####

![在这里插入图片描述][509c5cac64ae41c39d2c27e72a569e3c.png]

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

handleEditorChange 方法会在 CodingEditor 组件的内容发生变化时被调用。这是通过在父组件中使用 @change 事件监听来实现的。

确保在 MonacoEditor.vue 组件中正确触发 props.onChange 事件，然后在父组件中使用 @change 事件即可监听 Monaco Editor 的内容变化。

### 2.4 效果展示 ###

![在这里插入图片描述][f88d5055897a4c0ab4bc4809338f221f.png]

## 🦁 三. 总结 ##

一个 Demo 总结，希望能帮助到您！具体源码获取，可见我的：Gitee。  
咱们下期再会！

--------------------

![在这里插入图片描述][59e6298ecc134fbeb947b1b24ecfd48a.gif_pic_center]

### 🦁 其它优质专栏推荐 🦁 ###

> 🌟[《Java核心系列（修炼内功，无上心法)》][Java]: **主要是JDK源码的核心讲解，几乎每篇文章都过万字，让你详细掌握每一个知识点！**

> 🌟 [《springBoot 源码剥析核心系列》][springBoot]：**一些场景的Springboot源码剥析以及常用Springboot相关知识点解读**

**欢迎加入狮子的社区**：『[Lion-编程进阶之路][Lion-]』，日常收录优质好文

**更多文章可持续关注上方🦁的博客，2024咱们顶峰相见！**

[299da6849a844e6881a91ce15d16239c.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/01/48afd3c025f94b2cba6f32a00295515e.gif
[Monaco Editor]: https://github.com/microsoft/monaco-editor
[509c5cac64ae41c39d2c27e72a569e3c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/01/b8d2dfedc43a4bf7ab193822fa39ea3c.png
[f88d5055897a4c0ab4bc4809338f221f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/01/c51ab8bedda447c2b92d7fdae5f849a9.png
[59e6298ecc134fbeb947b1b24ecfd48a.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/01/119bf6c4bc4c47ca8c626d3671b816f7.gif
[Java]: https://blog.csdn.net/m0_58847451/category_12280615.html?spm=1001.2014.3001.5482
[springBoot]: https://blog.csdn.net/m0_58847451/category_12226203.html?spm=1001.2014.3001.5482
[Lion-]: https://bbs.csdn.net/forums/lion-society?spm=1001.2014.3001.6682