79 lines
2.5 KiB
Vue
79 lines
2.5 KiB
Vue
<template>
|
|
<el-select v-model="language">
|
|
<el-option value="c">C</el-option>
|
|
<el-option value="python">Python</el-option>
|
|
</el-select>
|
|
<div ref="monacoEditorRef" style="height: 300px"></div>
|
|
</template>
|
|
<script lang="ts" setup>
|
|
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"
|
|
|
|
import * as monaco from "monaco-editor"
|
|
import { nextTick, ref, onBeforeUnmount, onMounted } from "vue"
|
|
|
|
const text = ref("")
|
|
const monacoEditorRef = ref()
|
|
const language = ref("C")
|
|
|
|
// @ts-ignore
|
|
self.MonacoEnvironment = {
|
|
getWorker(workerId: string, label: string) {
|
|
if (label === "json") {
|
|
return new jsonWorker()
|
|
}
|
|
if (label === "css" || label === "scss" || label === "less") {
|
|
return new cssWorker()
|
|
}
|
|
if (label === "html" || label === "handlebars" || label === "razor") {
|
|
return new htmlWorker()
|
|
}
|
|
if (label === "typescript" || label === "javascript") {
|
|
return new tsWorker()
|
|
}
|
|
return new editorWorker()
|
|
},
|
|
}
|
|
|
|
onBeforeUnmount(() => {
|
|
editor.dispose()
|
|
})
|
|
|
|
onMounted(() => {
|
|
editorInit()
|
|
})
|
|
|
|
let editor: monaco.editor.IStandaloneCodeEditor
|
|
|
|
function editorInit() {
|
|
nextTick(() => {
|
|
!editor
|
|
? (editor = monaco.editor.create(monacoEditorRef.value, {
|
|
value: text.value, // 编辑器初始显示文字
|
|
language: "python", // 语言支持自行查阅demo
|
|
automaticLayout: true, // 自适应布局
|
|
theme: "vs", // 官方自带三种主题vs, hc-black, or vs-dark
|
|
foldingStrategy: "indentation",
|
|
renderLineHighlight: "all", // 行亮
|
|
selectOnLineNumbers: true, // 显示行号
|
|
minimap: {
|
|
enabled: false,
|
|
},
|
|
readOnly: false, // 只读
|
|
fontSize: 16, // 字体大小
|
|
scrollBeyondLastLine: false, // 取消代码后面一大段空白
|
|
overviewRulerBorder: false, // 不要滚动条的边框
|
|
}))
|
|
: editor.setValue("")
|
|
// 监听值的变化
|
|
editor.onDidChangeModelContent(() => {
|
|
text.value = editor.getValue()
|
|
})
|
|
})
|
|
}
|
|
</script>
|
|
<style scoped></style>
|