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

初步教程，如有错误还请指正，如果之后教程过期请参考官方文档使用或者寻找新的依赖替代。

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

<script setup>
import {
  ref,
  onMounted,
  onBeforeUnmount,
  watch,
  defineProps,
  defineEmits,
} from "vue";
import loader from "@monaco-editor/loader";

const props = defineProps({
  value: String,
  language: {
    type: String,
    default: "java",
  },
  theme: {
    type: String,
    default: "vs-dark",
  },
});

const emits = defineEmits(["update:value"]);

const editorContainer = ref(null);
let editorInstance = null;

onMounted(() => {
  loader.init().then((monaco) => {
    editorInstance = monaco.editor.create(editorContainer.value, {
      value: props.value || "",
      language: props.language,
      theme: props.theme,
    });

    editorInstance.onDidChangeModelContent(() => {
      emits("update:value", editorInstance.getValue());
    });
  });
});

onBeforeUnmount(() => {
  if (editorInstance) {
    editorInstance.dispose();
  }
});

watch(
  () => props.language,
  (newLanguage) => {
    if (editorInstance) {
      loader.init().then((monaco) => {
        monaco.editor.setModelLanguage(editorInstance.getModel(), newLanguage);
      });
    }
  }
);

watch(
  () => props.value,
  (newValue) => {
    if (editorInstance && editorInstance.getValue() !== newValue) {
      editorInstance.setValue(newValue);
    }
  }
);
</script>

<template>
  <div ref="editorContainer" class="editor-container"></div>
</template>

<style>
.editor-container {
  width: 100%;
  height: 100%;
}
</style>

src\App.vue

<script setup>
import { ref } from 'vue';
import MonacoEditor from '@/components/MonacoEditor.vue';

const code = ref('// Hello World');
const language = ref('java');
const theme = ref('vs-dark');

const logValue = () => {
  console.log(code.value);
};
</script>

<template>
  <div id="editor" style="height: 400px">
    <MonacoEditor v-model:value="code" :language="language" :theme="theme" />
  </div>
  <div class="controls">
    <label for="language">Select Language: </label>
    <select id="language" v-model="language">
      <option value="java">Java</option>
      <option value="javascript">Javascript</option>
    </select>
  </div>
  <button @click="logValue">Log Value</button>
</template>

3.格式化Java代码

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

npm i prettier prettier-plugin-java

src\App.vue

<script setup>
import { ref } from 'vue';
import MonacoEditor from '@/components/MonacoEditor.vue';
import prettier from 'prettier/standalone';
import java from 'prettier-plugin-java';

const code = ref('// Hello World');
const language = ref('java');
const theme = ref('vs-dark');

const formatCode = async () => {
  const formattedCode = await prettier.format(code.value, {
    parser: 'java',
    plugins: [java],
  });
  code.value = formattedCode;
};

const logValue = () => {
  console.log(code.value);
};
</script>

<template>
  <div id="editor" style="height: 400px">
    <MonacoEditor v-model:value="code" :language="language" :theme="theme" />
  </div>
  <div class="controls">
    <label for="language">Select Language: </label>
    <select id="language" v-model="language">
      <option value="java">Java</option>
      <option value="javascript">Javascript</option>
    </select>
  </div>
  <button @click="formatCode">Format Code</button>
  <button @click="logValue">Log Value</button>
</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)