前端开发整合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><divid="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

先创建一个自定义模版组

在组下创建代码模版

输入缩写 即可生成模版代码