废话不多说,首先npm安装
npm install monaco-editor
然后新建一个vue直接上代码
<template>
<div ref="editorRef" style="height: 300px; width: 100%;margin-top: 15px;"></div>
</template>
<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import * as monaco from 'monaco-editor';
import editorWorker from "monaco-editor/esm/vs/editor/editor.worker?worker"
import jsonWorker from "monaco-editor/esm/vs/language/json/json.worker?worker"
import cssWorker from "monaco-editor/esm/vs/language/css/css.worker?worker"
import htmlWorker from "monaco-editor/esm/vs/language/html/html.worker?worker"
import tsWorker from "monaco-editor/esm/vs/language/typescript/ts.worker?worker"
// 使用 ref 创建一个 DOM 元素的引用
const editorRef = ref(null);
const scriptValue = ref('// 在此处输入脚本');
const language = ref('javascript');
onMounted(() => {
// 初始化 Monaco Editor
if (editorRef.value) {
monaco.editor.create(editorRef.value, {
value: scriptValue.value, language: language.value,
foldingStrategy: "indentation", showFoldingControls: "always", disableLayerHinting: true,
emptySelectionClipboard: false, selectionClipboard: false, automaticLayout: true,
codeLens: false, scrollBeyondLastLine: false, colorDecorators: true, accessibilitySupport: "off",
lineNumbers: "on", lineNumbersMinChars: 5, readOnly: false, folding: true, foldingHighlight: true
});
}
})
self.MonacoEnvironment = {
getWorker: (_, label) => {
const workers = {
'html': new htmlWorker(), 'css': new cssWorker(), 'json': new jsonWorker(),
'javascript': new tsWorker(), 'typescript': new tsWorker()
};
return workers[label] || new editorWorker();
}
};
monaco.languages.typescript.typescriptDefaults.setEagerModelSync(true);
monaco.editor.setTheme("vs-dark");
</script>
运行展示