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

配景

做oj体系的时候,必要使用代码编辑器,决定使用Monaco Editor，但是由于自身本领问题，读不懂官网文档，最终联合ai和网友的帖子成功引入，并封装了组件，支持v-model吸收文档内容。盼望可以资助到别人。
环境说明

• vite
  
• vue3
  
• pnpm
  

安装流程以及组件封装

引入依靠

1. pnpm install monaco-editor

复制代码

封装组件

1. <script setup lang="ts">
2. import * as monaco from 'monaco-editor'
3. import { onMounted, ref } from 'vue'
6. // 容器对象
7. const editorContainer = ref()
9. // 编辑器对象
10. let codeEditor: monaco.editor.IStandaloneCodeEditor | null = null
12. // 声明一个input事件
13. const emit = defineEmits(['update:modelValue'])
15. // 从父组件中接收
16. const props = defineProps({
17.   language: {
18.     type: String,
19.     default: 'javascript'
20.   },
21.   modelValue: {
22.     type: String,
23.     default: '',
24.     required: true
25.   }
26. })
28. onMounted(() => {
29.   codeEditor = monaco.editor.create(editorContainer.value, {
30.     value: props.modelValue,
31.     language: props.language,
32.     lineNumbers: "on",
33.     roundedSelection: false,
34.     scrollBeyondLastLine: false,
35.     readOnly: false,
36.     theme: "vs",
37.     fontSize: 24
38.   })
40.   // 设置监听事件
41.   codeEditor.onDidChangeModelContent(() => {
42.     emit('update:modelValue', codeEditor?.getValue())
43.   })
44. })
45. </script>
47. <template>
48.   <div ref="editorContainer" style="height: 100%; width: 100%"/>
49. </template>
51. <style scoped>
53. </style>

复制代码

外部使用

1. <script setup lang="ts">
2. import CodeEditor from '@/components/editor/CodeEditor/CodeEditor.vue'
3. import { ref } from 'vue'
5. // 编程语言
6. const codeLanguage = ref('java')
8. // 代码编辑器值
9. const text = ref('')
11. </script>
13. <template>
14.   <a-row>
15.     <a-col :span="22" :offset="1">
16.       <md-edit style="border: 1px black solid" @getMdEditText="getMdEditText" />
17.       <div style="height: 500px; width: 100%; border: 1px black solid">
18.         <code-editor :language="codeLanguage" v-model="text"/>
19.         获取到的值:
20.         {{ text }}
21.       </div>
22.     </a-col>
23.   </a-row>
24. </template>

复制代码

实现效果

v-model实现原理

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

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。