一、編寫頁面

主要是引入相關的css文件和js文件，這里采用簡單插入link和script標簽的形式。

Document

click

二、配置CodeMirror

在index.js中配置CodeMirror

window.onload = function () {

var el = document.getElementById("editor");

var version = "# version: Python3\n\n";

var codeAreaTip = "# please edit your code here:\n";

var codeStart = "# code start\n\n";

var codeEnd = "# code end\n\n";

var codeTip = "'''\nThis function is the entry of this program and\nit must be return your answer of current question.\n'''\n";

var code = "def solution():\n\tpass";

var initValue = version + codeAreaTip + codeStart + codeEnd + codeTip + code;

var myCodeMirror = CodeMirror.fromTextArea(el, {

mode: "python", // 語言模式

theme: "leetcode", // 主題

keyMap: "sublime", // 快鍵鍵風格

lineNumbers: true, // 顯示行號

smartIndent: true, // 智能縮進

indentUnit: 4, // 智能縮進單位為4個空格長度

indentWithTabs: true, // 使用制表符進行智能縮進

lineWrapping: true, //

// 在行槽中添加行號顯示器、折疊器、語法檢測器

gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter", "CodeMirror-lint-markers"],

foldGutter: true, // 啟用行槽中的代碼折疊

autofocus: true, // 自動聚焦

matchBrackets: true, // 匹配結束符號，比如"]、}"

autoCloseBrackets: true, // 自動閉合符號

styleActiveLine: true, // 顯示選中行的樣式

});

// 設置初始文本，這個選項也可以在fromTextArea中配置

myCodeMirror.setOption("value", initValue);

// 編輯器按鍵監聽

myCodeMirror.on("keypress", function() {

// 顯示智能提示

myCodeMirror.showHint(); // 注意，注釋了CodeMirror庫中show-hint.js第131行的代碼(阻止了代碼補全，同時提供智能提示)

});

var test = document.getElementById("test");

test.onclick = function() {

var value = myCodeMirror.getValue();

axios.post("http://localhost/api/runcode", {

code: value

}).then(function(res) {

console.log(res);

});

};

};

三、后臺調用python shell

過程如下：

在接收的代碼字符串后面添加print(solution())用于打印結果

將第一步處理后的字符串寫入一個文件中這里是code/code.py

使用child_process模塊的exec方法調用shell執行python code/code.py命令，獲取打印結果

const express = require("express");

const { exec } = require("child_process");

const router = express.Router();

router.post("/api/runcode", (req, res) => {

let code = req.body.code;

fs.writeFile("code/code.py", code+"\nprint(solution())", (err) => {

let command = "python code/code.py";

exec(command, (err, stdout, stdin) => {

if(err){

let reg = /[\d\D]*(line\s\d)[\d\D]*?(\w*(?:Error|Exception).*)/im;

let matchArr = reg.exec(err.message);

matchArr.shift();

res.send(matchArr.join(", "));

}

else

res.send(stdout);

});

});

});

效果：

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持。

總結

以上是生活随笔為你收集整理的python编辑代码的页面_使用CodeMirror实现Python3在线编辑器的示例代码的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。