Vue3+ts实现基于monaco Editor的VsCode网页代码编辑器_vue3 ts monaco-editor

废话不多说，首先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>

运行展示