Vue3 基本使用 Monaco Editor Web编辑器 202407

开端教程，如有错误还请指正，如果之后教程逾期请参考官方文档使用或者寻找新的依靠替代。
1.安装依靠

1. npm i monaco-editor @monaco-editor/loader

复制代码

monaco-editor - npm (npmjs.com)
@monaco-editor/loader - npm (npmjs.com)
2024/7/27使用版本
   monaco-editor : ^0.50.0
  @monaco-editor/loader : ^1.4.0
  2.基本使用

   vue-project\src\components\MonacoEditor.vue

1. <script setup>
2. import {
3.   ref,
4.   onMounted,
5.   onBeforeUnmount,
6.   watch,
7.   defineProps,
8.   defineEmits,
9. } from "vue";
10. import loader from "@monaco-editor/loader";
12. const props = defineProps({
13.   value: String,
14.   language: {
15.     type: String,
16.     default: "java",
17.   },
18.   theme: {
19.     type: String,
20.     default: "vs-dark",
21.   },
22. });
24. const emits = defineEmits(["update:value"]);
26. const editorContainer = ref(null);
27. let editorInstance = null;
29. onMounted(() => {
30.   loader.init().then((monaco) => {
31.     editorInstance = monaco.editor.create(editorContainer.value, {
32.       value: props.value || "",
33.       language: props.language,
34.       theme: props.theme,
35.     });
37.     editorInstance.onDidChangeModelContent(() => {
38.       emits("update:value", editorInstance.getValue());
39.     });
40.   });
41. });
43. onBeforeUnmount(() => {
44.   if (editorInstance) {
45.     editorInstance.dispose();
46.   }
47. });
49. watch(
50.   () => props.language,
51.   (newLanguage) => {
52.     if (editorInstance) {
53.       loader.init().then((monaco) => {
54.         monaco.editor.setModelLanguage(editorInstance.getModel(), newLanguage);
55.       });
56.     }
57.   }
58. );
60. watch(
61.   () => props.value,
62.   (newValue) => {
63.     if (editorInstance && editorInstance.getValue() !== newValue) {
64.       editorInstance.setValue(newValue);
65.     }
66.   }
67. );
68. </script>
70. <template>
71.   <div ref="editorContainer" class="editor-container"></div>
72. </template>
74. <style>
75. .editor-container {
76.   width: 100%;
77.   height: 100%;
78. }
79. </style>

复制代码

  src\App.vue 

1. <script setup>
2. import { ref } from 'vue';
3. import MonacoEditor from '@/components/MonacoEditor.vue';
5. const code = ref('// Hello World');
6. const language = ref('java');
7. const theme = ref('vs-dark');
9. const logValue = () => {
10.   console.log(code.value);
11. };
12. </script>
14. <template>
15.   <div id="editor" style="height: 400px">
16.     <MonacoEditor v-model:value="code" :language="language" :theme="theme" />
17.   </div>
18.   <div class="controls">
19.     <label for="language">Select Language: </label>
20.     <select id="language" v-model="language">
21.       <option value="java">Java</option>
22.       <option value="javascript">Javascript</option>
23.     </select>
24.   </div>
25.   <button @click="logValue">Log Value</button>
26. </template>

复制代码

3.格式化Java代码

我现在没有找到 Monaco Editor 自带的格式化Java的功能，我使用了其他的依靠仅供参考。

1. npm i prettier prettier-plugin-java

复制代码

  src\App.vue  

1. <script setup>
2. import { ref } from 'vue';
3. import MonacoEditor from '@/components/MonacoEditor.vue';
4. import prettier from 'prettier/standalone';
5. import java from 'prettier-plugin-java';
7. const code = ref('// Hello World');
8. const language = ref('java');
9. const theme = ref('vs-dark');
11. const formatCode = async () => {
12.   const formattedCode = await prettier.format(code.value, {
13.     parser: 'java',
14.     plugins: [java],
15.   });
16.   code.value = formattedCode;
17. };
19. const logValue = () => {
20.   console.log(code.value);
21. };
22. </script>
24. <template>
25.   <div id="editor" style="height: 400px">
26.     <MonacoEditor v-model:value="code" :language="language" :theme="theme" />
27.   </div>
28.   <div class="controls">
29.     <label for="language">Select Language: </label>
30.     <select id="language" v-model="language">
31.       <option value="java">Java</option>
32.       <option value="javascript">Javascript</option>
33.     </select>
34.   </div>
35.   <button @click="formatCode">Format Code</button>
36.   <button @click="logValue">Log Value</button>
37. </template>

复制代码

4.其他

必要其他功能自行参考官方文档或者中文文档
Monaco Editor (microsoft.github.io)
Monaco Editor Translate (wf0.github.io)
Monaco Editor 中文文档整理（超具体、超全面、带demo示例）_monacoeditor中文文档-CSDN博客
下面这个好像已经封装vue组件了，使用可能更加方便 
monaco-editor-vue3 - npm (npmjs.com)  

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