第一步
npm i monaco-editor@0.34.1 monaco-editor-webpack-plugin@7.0.1
第二步
<template>
<!-- <button @click="format">格式化</button> -->
<button @click="getCodeContext">获取数据</button>
<button @click="handleTheme">设置主题</button>
<div id="app" ref="editorContainer"></div>
</template>
<script setup lang="ts">
import {
onMounted, ref, toRaw } from "vue";
import * as monaco from "monaco-editor";
const codeContent = ref("");
const editorContainer = ref<any>(null);
const editor = ref<any>(null);
const editorTheme = ref<string>("vs-dark");
onMounted(() => {
editor.value = monaco.editor.create(editorContainer.value, {
value: "",
theme: editorTheme.value,
language: "javascript",
folding: true,
foldingHighlight: true,
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,
});
editor.value.onDidChangeModelContent((e) => {
});
console.log(editor.value, "监听内容变化");
editor.value.onDidBlurEditorText(() => {
});
});
function getCodeContext() {
codeContent.value = toRaw(editor.value).getValue();
return console.log(codeContent.value);
}
function format() {
toRaw(editor.value).trigger("anything", "editor.action.formatDocument");
}
function handleTheme() {
monaco.editor.setTheme("vs");
}
</script>
<style scoped>
#app {
height: 500px;
}
</style>
第三步
const {
defineConfig } = require("@vue/cli-service");
const MonacoWebpackPlugin = require("monaco-editor-webpack-plugin");
module.exports = defineConfig({
transpileDependencies: true,
configureWebpack: {
plugins: [new MonacoWebpackPlugin()],
},
});