OJ在线评测系统 前端开发整合开源组件 Monaco Editor 并且开发创建题目页面

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

先创建一个自定义模版组

在组下创建代码模版

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