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