福建：网站建设,民宿设计网站大全,南京营销,app定制开发谈判技巧在线代码编辑器 文章说明前台核心代码后台核心代码效果展示源码下载 文章说明 采用Java结合vue3设计实现的在线代码编辑功能#xff0c;支持在线编辑代码、运行代码#xff0c;同时支持导入文件#xff0c;支持图片识别#xff0c;支持复制代码#xff0c;可将代码导出为图… 在线代码编辑器 文章说明前台核心代码后台核心代码效果展示源码下载 文章说明 采用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();
}
/scripttemplatediv classcontainerdiv classtool-bardiv classrowel-select v-modeldata.language placeholder请选择编程语言 stylewidth: 80%template v-foritem in languageList :keyitemel-option :labelitem :valueitem//template/el-select/divdiv classrow stylemargin-top: -0.5remel-button typeprimary clickrun运行/el-buttonel-button typedanger clickreset清空/el-buttonel-button typedanger clicksingleImport导入代码/el-buttoninput v-ifdata.uploadExist refuploadFileRef accept.txt,.java,.py,.js,.c,.cpp,.cs styledisplay: nonetypefile changeuploadFile($event)/divdiv classrow stylemargin-top: -0.5remel-button typeprimary clickexportCode导出代码/el-buttonel-button typedanger clickexportCodeToImg下载为图片/el-button/div/divdiv classcontent-containerdiv classeditor-contentMdEditor v-modeldata.codeText :previewfalse :toolbars[] placeholder代码输入区域styleheight: 100%; width: 100% themedark//divdiv classdisplay-contentMdPreview v-modelcodeText :show-code-row-numberfalse styleheight: 100%; width: 100%//divdiv classinput-contentMdEditor v-modeldata.inputText :previewfalse :toolbars[] placeholder控制台文件输入区域styleheight: 100%; width: 100% themedark//divdiv classresult-contentMdEditor v-modeldata.displayText :previewfalse :toolbars[] placeholder结果展示区域 read-onlystyleheight: 100%; width: 100% themedark//div/div/divel-dialog v-modeldata.exportDialogVisible title代码下载为图片 width90%img :srcdata.exportImgUrl alt stylewidth: 100%; height: auto/template #footerel-button typeprimary clickdata.exportDialogVisible false取消/el-buttonel-button typedanger clickexportCodeToImgConfirm确认/el-button/template/el-dialog
/templatestyle langscss
* {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 {ArrayListString 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#代码 将代码下载为图片 源码下载 在线代码编辑器
