我正在專門為python制作一個文本編輯器，它使用Pyodide來運行和顯示代碼輸出。然而，我堅持實現兩件事，一是我希望能夠顯示當前目錄中打開文件的所有文件。為了澄清，我當前的代碼一次只能在我選擇的目錄下打開一個python文件。例如，如果我選擇顯示/_static/test_folder/ main.py，我希望能夠在編輯器的左側顯示test_folder中所有其他文件的列表。如下圖所示:
其次，我想在頂部顯示所述文件的標簽，類似于vs代碼所做的，我相信這可以在沒有任何javascript和一些花哨的HTML和CSS的情況下完成，但我不知道如何實現。我怎么能做到呢？這是我的代碼，它很簡單，但它工作得很好，我只是想添加這兩個額外的功能:
代碼編輯器. html:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pyodide in Action</title>
<link rel="stylesheet" href="styles.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.4/ace.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.4/ext-static_highlight.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.4/ext-modelist.js"></script>
<script src="https://unpkg.com/file-saver"></script>
<script src="pyodide.js"></script>
</head>
<body>
<div class="container">
<div class="one">
<pre id="editor" style="width: 1225px;height:500px;"></pre>
</div>
</div>
<button id="run_code">Mark</button><br>
<br>
<textarea rows=10 cols=30 id=output style="margin: 0px; width: 1210px; height: 461px;">Loading and compiling...</textarea><br>
<script type="text/javascript" src="challenge-editor.js"></script>
</body></html>styles.css:
#editor {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 1225px;
height: 500px;
}
.container {
width: 80%;
height: 500px;
margin: auto;
padding: 10px;
}
.one {
width: 50%;
height: 500px;
float: left;
}
.two {
margin-left: 50%;
height: 500px;
}
#run_code {
border-radius: 4px; /* Adjust the value to change the roundness of the corners */
padding: 10px 20px;
background-color: #408ddf;
color: white;
font-size: 16px;
border: none;
cursor: pointer;
}挑戰-editor.js:
const fileSaver = require('file-saver');
var editor = ace.edit("editor");
var output_pane;
var filePath = '/_static/test_files/main.py';
languagePluginLoader.then(() => {
// pyodide is now ready to use...
appendOutput('Python ready.\n');
});
function appendOutput(msg) {
// used to add program output to the textarea
output_pane.value = output_pane.value + '\n' + msg;
output_pane.scrollTop = output_pane.scrollHeight;
}
function configEditor(){
// configure the ace editor to make it usable
editor = ace.edit("editor");
editor.setTheme("ace/theme/xcode");
editor.session.setMode("ace/mode/python");
editor.setShowPrintMargin(false);
editor.setBehavioursEnabled(true);
editor.setFontSize(13);
openCode(filePath);
}
function openCode(filePath) {
fetch(filePath)
.then(response => response.text())
.then(code => {
var modelist = ace.require("ace/ext/modelist");
var modeName = modelist.getModeForPath(filePath).mode;
console.log(modeName);
editor.session.setMode(modeName);
editor.session.setValue(code);
})
.catch(error => {
console.error('Error occurred while opening the code:', error);
});
}
async function runCode(code_to_run) {
// run the code from the editor and display the output in the textarea
console.logs = [];
let promise = new Promise((resolve, reject) => {
window.pyodide.runPython(code_to_run)
resolve(true)
}).catch(err => {
alert("Error: " + err)
});
let result = await promise;
if (result) {
appendOutput(console.logs.join('\n'));
save_code(code_to_run);
}
}
function save_code(code) {
var blob = new Blob([code], { type: "text/plain;charset=utf-8" });
window.saveAs(blob, filePath);
}
document.addEventListener('DOMContentLoaded', (event) => {
output_pane = document.getElementById("output");
document.getElementById("run_code").addEventListener('click', function () {
runCode(editor.getValue());
});
// Capture the output from Pyodide and add it to an array
console.stdlog = console.log.bind(console);
console.logs = [];
console.log = function(){
console.logs.push(Array.from(arguments));
console.stdlog.apply(console, arguments);
}
configEditor();
});您可以創建其他& quot編輯會話& quot并使用editor.setSession更改您正在編輯的內容，就像這樣(假設Ace編輯器引用在編輯器中，就像在廚房水槽中):
var EditSession = ace.require("ace/edit_session").EditSession;
var oldSession = editor.getSession();
// change session:
var newSession = new EditSession("import antigravity", "ace/mode/python");
editor.setSession(newSession);
// change it back later:
setTimeout(function() {
editor.setSession(oldSession);
}, 5000);剩下的就看你自己了——給自己找一個& quot樹形視圖& quot庫，并在單擊文件元素時切換到相應的編輯會話。