前端开发整合Monaco Editor
微软官方的
npm install monaco-editor下载兼容版本
npm install monaco-editor@latest代码编辑器
先把编辑器本身安装好monaco-editor
安装插件
npm install monaco-editor-webpack-plugin
这个插件的作用是把我们的代码编译器和webpack打包在一起
便于我们去加载
查看一下官方文档
vue项目整合monaco-editor
webpack项目
现在vue.config.js中配置webpack插件
const { defineConfig } = require("@vue/cli-service");
const MonacoWebpackPlugin = require("monaco-editor-webpack-plugin");
module.exports = defineConfig({
transpileDependencies: true,
chainWebpack(config) {
config.plugin("monaco").use(new MonacoWebpackPlugin());
},
});
如何使用呢
查看示例教程
我们跟刚才的文本编译器一样
写一个组件
<template>
<div
id="code-editor"
ref="codeEditorRef"
style="min-height: 400px; height: 60vh"
/>
<!-- <a-button @click="fillValue">填充值</a-button>-->
</template>
<script setup lang="ts">
import * as monaco from "monaco-editor";
import { onMounted, ref, toRaw, withDefaults, defineProps, watch } from "vue";
/**
* 定义组件属性类型
*/
interface Props {
value: string;
language?: string;
handleChange: (v: string) => void;
}
/**
* 给组件指定初始值
*/
const props = withDefaults(defineProps<Props>(), {
value: () => "",
language: () => "java",
handleChange: (v: string) => {
console.log(v);
},
});
const codeEditorRef = ref();
const codeEditor = ref();
// const fillValue = () => {
// if (!codeEditor.value) {
// return;
// }
// // 改变值
// toRaw(codeEditor.value).setValue("新的值");
// };
watch(
() => props.language,
() => {
if (codeEditor.value) {
monaco.editor.setModelLanguage(
toRaw(codeEditor.value).getModel(),
props.language
);
}
}
);
onMounted(() => {
if (!codeEditorRef.value) {
return;
}
// Hover on each property to see its docs!
codeEditor.value = monaco.editor.create(codeEditorRef.value, {
value: props.value,
language: props.language,
automaticLayout: true,
colorDecorators: true,
minimap: {
enabled: true,
},
readOnly: false,
theme: "vs-dark",
// lineNumbers: "off",
// roundedSelection: false,
// scrollBeyondLastLine: false,
});
// 编辑 监听内容变化
codeEditor.value.onDidChangeModelContent(() => {
props.handleChange(toRaw(codeEditor.value).getValue());
});
});
</script>
<style scoped></style>
在我们的主页中去引入
<template>
<div class="home">
<MdEditor :value="value" :handle-change="onChange" />
<img alt="Vue logo" src="../assets/logo.png" />
<CodeEditor />
</div>
</template>
<script setup lang="ts">
import { defineComponent, ref } from "vue";
import MdEditor from "@/components/MdEditor.vue";
import CodeEditor from "@/components/CodeEditor.vue";
const value = ref();
const onChange = (v: string) => {
value.value = v;
};
</script>
和md编辑器一样
也要接受父组件的传值
把显示的输入
实时得到的结果交给父组件去控制
实时得到代码
开发创建题目页面
我们用插件自动根据后端生成代码
我们还是使用openAPI
终端指令
openapi --input http://localhost:8121/api/v2/api-docs --output ./generated --client axios接下来我们开发页面
{
"answer": "",
"content": "",
"judgeCase": [
{
"input": "",
"output": ""
}
],
"judgeConfig": [
{
"memoryLimit": 0,
"stackLimit": 0,
"timeLimit": 0
}
],
"tags": [],
"title": ""
}vue文件
<template>
<div id="文件名的小写"></div>
</template>
<script setup lang="ts"></script>
<style scoped></style>
在JetBrains系列编辑器中打开设置
搜索live Tempaltes
先创建一个自定义模版组
在组下创建代码模版
