前言

新项目里面要用到monaco-editor，因为是vue3和vite出现了一些问题，这边记录一下

导入

首先导入下面两个模块

npm install monaco-editor
npm install vite-plugin-monaco-editor

然后在vite.config.js中导入

import monacoEditorPlugin from 'vite-plugin-monaco-editor'
export default defineConfig({
 
  plugins: [vue(),
      monacoEditorPlugin({
        languageWorkers: ['editorWorkerService', 'typescript', 'json', 'html']
      })
    ],
    resolve: {
    },
})

在这边我出现第一个错误

 monacoEditorPlugin is not a function

解决办法
删除package.json里面的

 "type": "module",

组件编写

子组件编写

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

父组件

<script setup>
import CodingEditor from '../codedite.vue'
import {  ref } from "vue";
const handleEditorChange = (value) => {
  console.log('Editor content changed in parent component:', value);
};
const code = ref(`{token:'123456'}`)
</>
 <CodingEditor :value="code " @change="handleEditorChange"></CodingEditor>

在这里有发现三个问题，一个是监控函数出现问题，当value发生变化时页面卡死，后来是因为监控函数取值问题,加入toRaw取原始函数

  import { toRaw} from 'vue';
  editor.value.getValue()
	//改为
toRaw(editor.value).getValue()

然后报错emit不是函数,解决办法子组件修改

setup(props) 
//改为
setup(props,{emit}) 

还有我这个子组件如果用在dialog里面会导致第一打开只有一个黑点。解决办法加一个延时100ms

setTimeout(() => {
},100)

最后一个问题，就是这个value只能能是字符串类型的，不能是对象，所以如果要在里面编辑对象，一开始要转换为字符串JSON.stringify

结尾

其实这个功能网上有很多的例子方法，但是我在开发中还是有很多问题，在这里就记录一下出现的问题