前端开发整合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
先创建一个自定义模版组
在组下创建代码模版
