在线代码编辑器

文章说明

采用Java结合vue3设计实现的在线代码编辑功能，支持在线编辑代码、运行代码，同时支持导入文件，支持图片识别，支持复制代码，可将代码导出为图片

暂时还未添加图片代码识别导入的功能，然后目前Linux版本下安装C#的编译器我还没找到好的方案，这个C#代码运行在Linux环境下暂时有点问题

目前对于代码安全方面还未添加校验，只作为简单的学习使用，存在着不小的风险，后续会考虑新开坑，书写更完善的在线编辑器

目前的这个结果展示的编码方面还有一些问题，主要是控制台输入、命令行以及文件本身的编码会有不一致的情况，有些难整，后续考虑采用新方案给这个问题解决一下

前台核心代码

前台主要采用 md-editor-v3 编辑器作为代码编辑区域，虽然没有提示功能，但是展示效果上会好一些，然后运行的时候调用后台接口，采用Java调用cmd命令行来实现代码的运行

其中代码下载为图片采用的是对dom对象进行下载，采用html2canvas来实现，会有一些小bug，不过效果感觉还可以

前台核心代码

<script setup>
import {MdEditor, MdPreview} from 'md-editor-v3';
import 'md-editor-v3/lib/style.css';
import 'md-editor-v3/lib/preview.css';
import {computed, onBeforeMount, reactive, ref, watch} from "vue";
import html2canvas from "html2canvas";
import {confirm,downloadFileToLocalByUrl,exportCommon,getRequest,loading,message,postRequest,prompt
} from "@/util";const data = reactive({language: "",codeText: "",inputText: "",displayText: "",exportDialogVisible: false,exportImgUrl: "",uploadExist: true,
});const languageList = ["Java","Python","Javascript","C","C++","C#",
];const codeText = computed(() => {return "```" + data.language + "\n" + data.codeText + "\n```"
});function exportCodeToImg() {const displayContent = document.getElementsByClassName("display-content")[0];data.exportDialogVisible = true;html2canvas(displayContent, {}).then((canvas) => {data.exportImgUrl = canvas.toDataURL('image/png');});
}function exportCode() {prompt("导出代码文件", "导出代码文件名称", data.language + "_" + new Date().toLocaleString() + ".txt", (value) => {exportCommon(data.codeText, value);});
}function exportCodeToImgConfirm() {prompt("导出代码图片", "导出代码图片名称", data.language + "_" + new Date().toLocaleString() + ".png", (value) => {downloadFileToLocalByUrl(data.exportImgUrl, value);data.exportDialogVisible = false;});
}function reset() {confirm("确认清空吗，包括代码区域、控制台文件输入以及结果展示区域？", () => {data.codeText = "";data.inputText = "";data.displayText = "";});
}function run() {if (!data.language) {message("请先选择编程语言", "warning");return;}const loadingInstance = loading("运行中...");postRequest("/codeRunner/run", null, {language: data.language,codeText: data.codeText,inputText: data.inputText,}).then((res) => {loadingInstance.close();if (res.data.code === 200) {data.displayText = res.data.data;message("代码运行成功", "success");} else if (res.data.code === 500) {message("代码运行失败", "error");}})
}const languageText = {};onBeforeMount(async () => {for (let i = 0; i < languageList.length; i++) {languageText[languageList[i]] = await getLanguageDefaultText(languageList[i]);}
});async function getLanguageDefaultText(language) {const res = await getRequest("/codeRunner/getDefaultText", {language});if (res.data.code === 200) {return res.data.data;} else if (res.data.code === 500) {message(language + "语言默认代码获取失败", "error");}
}watch(() => data.language, (newValue, oldValue) => {if (data.codeText) {languageText[oldValue] = data.codeText;}data.codeText = languageText[data.language];
});const uploadFileRef = ref();function uploadFile(event) {const loadingInstance = loading("导入中...");const file = event.target.files[0];const reader = new FileReader();reader.readAsText(file, 'utf8');data.uploadExist = false;reader.onload = () => {loadingInstance.close();const codeText = reader.result.toString();data.uploadExist = true;if (!codeText) {message("导出文件内容为空", "warning");return;}data.codeText = codeText;}
}function singleImport() {if (!data.language) {message("请先选择编程语言", "warning");return;}if (!data.uploadExist) {return;}uploadFileRef.value.click();
}
</script><template><div class="container"><div class="tool-bar"><div class="row"><el-select v-model="data.language" placeholder="请选择编程语言" style="width: 80%"><template v-for="item in languageList" :key="item"><el-option :label="item" :value="item"/></template></el-select></div><div class="row" style="margin-top: -0.5rem"><el-button type="primary" @click="run">运行</el-button><el-button type="danger" @click="reset">清空</el-button><el-button type="danger" @click="singleImport">导入代码</el-button><input v-if="data.uploadExist" ref="uploadFileRef" accept=".txt,.java,.py,.js,.c,.cpp,.cs" style="display: none"type="file" @change="uploadFile($event)"></div><div class="row" style="margin-top: -0.5rem"><el-button type="primary" @click="exportCode">导出代码</el-button><el-button type="danger" @click="exportCodeToImg">下载为图片</el-button></div></div><div class="content-container"><div class="editor-content"><MdEditor v-model="data.codeText" :preview="false" :toolbars="[]" placeholder="代码输入区域"style="height: 100%; width: 100%" theme="dark"/></div><div class="display-content"><MdPreview v-model="codeText" :show-code-row-number="false" style="height: 100%; width: 100%"/></div><div class="input-content"><MdEditor v-model="data.inputText" :preview="false" :toolbars="[]" placeholder="控制台文件输入区域"style="height: 100%; width: 100%" theme="dark"/></div><div class="result-content"><MdEditor v-model="data.displayText" :preview="false" :toolbars="[]" placeholder="结果展示区域" read-onlystyle="height: 100%; width: 100%" theme="dark"/></div></div></div><el-dialog v-model="data.exportDialogVisible" title="代码下载为图片" width="90%"><img :src="data.exportImgUrl" alt="" style="width: 100%; height: auto"/><template #footer><el-button type="primary" @click="data.exportDialogVisible = false">取消</el-button><el-button type="danger" @click="exportCodeToImgConfirm">确认</el-button></template></el-dialog>
</template><style lang="scss">
* {padding: 0;margin: 0;box-sizing: border-box;
}.container {width: 100vw;height: 100vh;display: flex;flex-direction: column;.tool-bar {height: 9rem;background-color: #282c34;border-bottom: 0.1rem solid gray;display: flex;flex-direction: column;align-items: center;justify-content: center;user-select: none;.row {width: 100%;flex: 1;display: flex;align-items: center;justify-content: center;}}.content-container {flex: 1;overflow: auto;display: flex;flex-direction: column;&::-webkit-scrollbar {width: 0;height: 0;}.md-editor-footer {display: none;}.cm-scroller {background-color: #282c34;}.editor-content {height: fit-content;border-bottom: 0.1rem solid gray;}.display-content {height: fit-content;border-bottom: 0.1rem solid gray;.md-editor-preview-wrapper {padding: 0;}.md-editor-code {margin: 0;}.md-editor-code-head {border-radius: 0 !important;}code {border-radius: 0 !important;white-space: pre-wrap;}}.input-content {flex: 1;background-color: #282c34;border-bottom: 0.1rem solid gray;}.result-content {flex: 1;background-color: #282c34;}}
}
</style>

后台核心代码

后台采用命令行运行代码，在Java、C、C++、C#，代码运行时会需要多步骤进行，目前采用的都是将代码写入到指定文件，然后采用指定命令运行绝对路径的文件，限制较大，后续考虑运行项目的形式，可以更加方便的解决文件编码问题以及代码运行问题

Java调用cmd运行代码工具类

package com.boot.util;import lombok.extern.slf4j.Slf4j;import java.io.File;
import java.io.FileInputStream;
import java.io.FileOutputStream;
import java.nio.charset.StandardCharsets;
import java.util.ArrayList;
import java.util.Date;import static com.boot.util.DefaultConfig.*;
import static com.boot.util.LanguageType.*;/*** @author bbyh* @date 2023/2/27 0027 15:10*/
@Slf4j
public class ExecUtil {public static String exec(String language, String codeText, String inputText) throws Exception {File codeTextInputFile = new File(LANGUAGE_INPUT_FILE_MAP.get(language));if (codeTextInputFile.exists()) {try (FileOutputStream outputStream = new FileOutputStream(codeTextInputFile)) {outputStream.write(codeText.getBytes(StandardCharsets.UTF_8));}}File inputTextInputFile = new File(INPUT_TEXT_PUT_FILE);if (inputTextInputFile.exists()) {try (FileOutputStream outputStream = new FileOutputStream(inputTextInputFile)) {outputStream.write(inputText.getBytes(StandardCharsets.UTF_8));}}if (judgeLinux()) {int exeCode = execLinux(language);logCodeTextRunLog(language, codeText, inputText, exeCode);} else if (judgeWindows()) {int exeCode = execWindows(language);logCodeTextRunLog(language, codeText, inputText, exeCode);}String[] outputFileNames = {ERROR_OUTPUT_FILE, OUTPUT_FILE};for (String outputFileName : outputFileNames) {File outputFile = new File(outputFileName);if (outputFile.exists()) {try (FileInputStream inputStream = new FileInputStream(outputFile)) {byte[] buf = new byte[1024 * 1024];int read = inputStream.read(buf);if (read >= 0) {String result = new String(buf, 0, read);String encoding = getEncoding(result);if (!"".equals(encoding)) {return new String(buf, 0, read, encoding);}}}}}return "";}private static void logCodeTextRunLog(String language, String codeText, String inputText, int exeCode) {log.info("运行时间：{}", new Date());log.info("编程语言：{}", language);log.info("运行代码：{}", codeText);log.info("运行输入：{}", inputText);log.info("运行结果：{}", exeCode);}private static int execLinux(String language) throws Exception {switch (language) {case JAVA:if (execLinuxCommand("javac " + JAVA_INPUT_FILE + " > " + OUTPUT_FILE + " 2> " + ERROR_OUTPUT_FILE) == 0) {int start = JAVA_INPUT_FILE.lastIndexOf("/") + 1;int end = JAVA_INPUT_FILE.lastIndexOf(".");String javaClassFileName = JAVA_INPUT_FILE.substring(start, end);return execLinuxCommand("java -classpath " + LINUX_PREFIX + " " + javaClassFileName + " < " + INPUT_TEXT_PUT_FILE + " > " + OUTPUT_FILE + " 2> " + ERROR_OUTPUT_FILE);}return 0;case PYTHON:return execLinuxCommand("python " + PYTHON_INPUT_FILE + " < " + INPUT_TEXT_PUT_FILE + " > " + OUTPUT_FILE + " 2> " + ERROR_OUTPUT_FILE);case JAVASCRIPT:return execLinuxCommand("node " + JAVASCRIPT_INPUT_FILE + " < " + INPUT_TEXT_PUT_FILE + " > " + OUTPUT_FILE + " 2> " + ERROR_OUTPUT_FILE);case C:if (execLinuxCommand("gcc " + C_INPUT_FILE + " -o " + LINUX_PREFIX + "a.exe > " + OUTPUT_FILE + " 2> " + ERROR_OUTPUT_FILE) == 0) {return execLinuxCommand(LINUX_PREFIX + "a.exe < " + INPUT_TEXT_PUT_FILE + " > " + OUTPUT_FILE + " 2> " + ERROR_OUTPUT_FILE);}return 0;case C_PLUS_PLUS:if (execLinuxCommand("g++ " + C_PLUS_PLUS_INPUT_FILE + " -o " + LINUX_PREFIX + "a.exe > " + OUTPUT_FILE + " 2> " + ERROR_OUTPUT_FILE) == 0) {return execLinuxCommand(LINUX_PREFIX + "a.exe < " + INPUT_TEXT_PUT_FILE + "> " + OUTPUT_FILE + " 2> " + ERROR_OUTPUT_FILE);}return 0;case C_SHARP:if (execLinuxCommand("csc /out:" + LINUX_PREFIX.replaceAll("/", "\\\\") + "a.exe "+ C_SHARP_INPUT_FILE.replaceAll("/", "\\\\") + " > " + OUTPUT_FILE + " 2> " + ERROR_OUTPUT_FILE) == 0) {return execLinuxCommand(LINUX_PREFIX + "a.exe < " + INPUT_TEXT_PUT_FILE + " > " + OUTPUT_FILE + " 2> " + ERROR_OUTPUT_FILE);}return 0;}return 0;}private static int execLinuxCommand(String command) throws Exception {ArrayList<String> commandList = new ArrayList<>();commandList.add("/bin/sh");commandList.add("-c");commandList.add(command);Process exec = Runtime.getRuntime().exec(commandList.toArray(new String[0]));return exec.waitFor();}private static int execWindows(String language) throws Exception {switch (language) {case JAVA:if (execWindowsCommand("javac " + JAVA_INPUT_FILE + " > " + OUTPUT_FILE + " 2> " + ERROR_OUTPUT_FILE) == 0) {int start = JAVA_INPUT_FILE.lastIndexOf("/") + 1;int end = JAVA_INPUT_FILE.lastIndexOf(".");String javaClassFileName = JAVA_INPUT_FILE.substring(start, end);return execWindowsCommand("java -classpath " + WINDOWS_PREFIX + " " + javaClassFileName + " < " + INPUT_TEXT_PUT_FILE + " > " + OUTPUT_FILE + " 2> " + ERROR_OUTPUT_FILE);}break;case PYTHON:return execWindowsCommand("python " + PYTHON_INPUT_FILE + " < " + INPUT_TEXT_PUT_FILE + " > " + OUTPUT_FILE + " 2> " + ERROR_OUTPUT_FILE);case JAVASCRIPT:return execWindowsCommand("node " + JAVASCRIPT_INPUT_FILE + " < " + INPUT_TEXT_PUT_FILE + " > " + OUTPUT_FILE + " 2> " + ERROR_OUTPUT_FILE);case C:if (execWindowsCommand("gcc " + C_INPUT_FILE + " -o " + WINDOWS_PREFIX + "a.exe > " + OUTPUT_FILE + " 2> " + ERROR_OUTPUT_FILE) == 0) {return execWindowsCommand(WINDOWS_PREFIX + "a.exe < " + INPUT_TEXT_PUT_FILE + " > " + OUTPUT_FILE + " 2> " + ERROR_OUTPUT_FILE);}return 0;case C_PLUS_PLUS:if (execWindowsCommand("g++ " + C_PLUS_PLUS_INPUT_FILE + " -o " + WINDOWS_PREFIX + "a.exe > " + OUTPUT_FILE + " 2> " + ERROR_OUTPUT_FILE) == 0) {return execWindowsCommand(WINDOWS_PREFIX + "a.exe < " + INPUT_TEXT_PUT_FILE + " > " + OUTPUT_FILE + " 2> " + ERROR_OUTPUT_FILE);}return 0;case C_SHARP:if (execWindowsCommand("csc /out:" + WINDOWS_PREFIX.replaceAll("/", "\\\\") + "a.exe "+ C_SHARP_INPUT_FILE.replaceAll("/", "\\\\") + " > " + OUTPUT_FILE + " 2> " + ERROR_OUTPUT_FILE) == 0) {return execWindowsCommand(WINDOWS_PREFIX + "a.exe < " + INPUT_TEXT_PUT_FILE + "> " + OUTPUT_FILE + " 2> " + ERROR_OUTPUT_FILE);}return 0;}return 0;}private static int execWindowsCommand(String command) throws Exception {Process exec = Runtime.getRuntime().exec("cmd /c " + command);return exec.waitFor();}public static Boolean judgeWindows() {return System.getProperty("os.name").toLowerCase().contains("windows");}public static Boolean judgeLinux() {return System.getProperty("os.name").toLowerCase().contains("linux");}public static String getEncoding(String str) throws Exception {String[] encodes = {"UTF-8", "GBK"};for (String encode : encodes) {if (str.equals(new String(str.getBytes(encode), encode))) {return encode;}}return "";}}

效果展示

运行Java代码

运行Python代码

运行JavaScript代码

运行C语言代码

运行C++代码

运行C#代码

将代码下载为图片

源码下载

在线代码编辑器