vue3+vite使用Monaco-editor

安装Monaco-editor

npm install monaco-editor

安装Vite Plugin Monaco Editor

vdesjs/vite-plugin-monaco-editor - Vite 中文文档

npm install --save-dev vite-plugin-monaco-editor

vite.config.ts :

import { defineConfig } from 'vite';
import monacoEditorPlugin from 'vite-plugin-monaco-editor';

export default defineConfig({
  plugins: [monacoEditorPlugin()],
});

<div id="code-editor" style="min-height: 100px;min-width: 100px;margin-top: 30px" ref="codeEditorRef">
</div>

 

import {monaco} from "../../../../../../customMonaco.ts";

const codeEditorRef = ref()
const codeEditor = ref()
onMounted(() => {
  if (!codeEditorRef.value) {
    return;
  }
  monaco.editor.create(codeEditorRef.value, {
    value: 'public',
    language: 'java',
  });
})