Vue3 基本使用 Monaco Editor Web编辑器 202407
努力变强的铦 2024-09-18 13:03:01 阅读 75
初步教程，如有错误还请指正，如果之后教程过期请参考官方文档使用或者寻找新的依赖替代。
1.安装依赖
<code>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>code>
</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">code>
<MonacoEditor v-model:value="code" :language="language" :theme="theme" />code>
</div>
<div class="controls">code>
<label for="language">Select Language: </label>code>
<select id="language" v-model="language">code>
<option value="java">Java</option>code>
<option value="javascript">Javascript</option>code>
</select>
</div>
<button @click="logValue">Log Value</button>code>
</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">code>
<MonacoEditor v-model:value="code" :language="language" :theme="theme" />code>
</div>
<div class="controls">code>
<label for="language">Select Language: </label>code>
<select id="language" v-model="language">code>
<option value="java">Java</option>code>
<option value="javascript">Javascript</option>code>
</select>
</div>
<button @click="formatCode">Format Code</button>code>
<button @click="logValue">Log Value</button>code>
</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)
声明
本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。