Vite管理的Vue3项目中monaco editer的使用以及组件封装

背景

做oj系统的时候,需要使用代码编辑器,决定使用Monaco Editor，但是因为自身能力问题，读不懂官网文档，最终结合ai和网友的帖子成功引入，并封装了组件，支持v-model接收文档内容。希望可以帮助到别人。

环境说明

• vite
• vue3
• pnpm

安装流程以及组件封装

引入依赖

pnpm install monaco-editor

封装组件

<script setup lang="ts">
import * as monaco from 'monaco-editor'
import { onMounted, ref } from 'vue'// 容器对象
const editorContainer = ref()// 编辑器对象
let codeEditor: monaco.editor.IStandaloneCodeEditor | null = null// 声明一个input事件
const emit = defineEmits(['update:modelValue'])// 从父组件中接收
const props = defineProps({language: {type: String,default: 'javascript'},modelValue: {type: String,default: '',required: true}
})onMounted(() => {codeEditor = monaco.editor.create(editorContainer.value, {value: props.modelValue,language: props.language,lineNumbers: "on",roundedSelection: false,scrollBeyondLastLine: false,readOnly: false,theme: "vs",fontSize: 24})// 设置监听事件codeEditor.onDidChangeModelContent(() => {emit('update:modelValue', codeEditor?.getValue())})
})
</script><template><div ref="editorContainer" style="height: 100%; width: 100%"/>
</template><style scoped></style>

外部使用

<script setup lang="ts">
import CodeEditor from '@/components/editor/CodeEditor/CodeEditor.vue'
import { ref } from 'vue'// 编程语言
const codeLanguage = ref('java')// 代码编辑器值
const text = ref('')</script><template><a-row><a-col :span="22" :offset="1"><md-edit style="border: 1px black solid" @getMdEditText="getMdEditText" /><div style="height: 500px; width: 100%; border: 1px black solid"><code-editor :language="codeLanguage" v-model="text"/>获取到的值:{{ text }}</div></a-col></a-row>
</template>

实现效果

v-model实现原理

v-model本身是vue提供的一个语法糖。v-model = @update:modelValue + :modelValue。
即当父组件中的modelValue值发生改变时，通过:modelValue传入子组件，子组件对完成页面渲染。当子组件中的钩子函数被触发时(即编辑器中的值被改变时)，通过emit触发update:modelValue事件，向父组件中传值，父组件中修改modelValue的值。