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>
实现效果
https://i-blog.csdnimg.cn/direct/0c6cfd97ff03434b872ec2dee8166e61.png
v-model实现原理
v-model本身是vue提供的一个语法糖。v-model = @update:modelValue + :modelValue。
即当父组件中的modelValue值发生改变时，通过:modelValue传入子组件，子组件对完成页面渲染。当子组件中的钩子函数被触发时(即编辑器中的值被改变时)，通过emit触发update:modelValue事件，向父组件中传值，父组件中修改modelValue的值。
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]