我正在尝试使用 Skulpt 在浏览器中编写 Python 代码编辑器来执行 Python 代码和 Code Mirror 作为文本编辑器。
由于 Skulpt 的输入函数使用警报输入,我决定编写自己的函数。我编写的输入函数有效并从模态中获取输入。
Sk.configure({output:outf, read:builtinRead, __future__: Sk.python3, inputfun: function (prompt) {
clearModal();
addModalQuestion(prompt);
toggleModal();
// the function returns a promise to give a result back later...
return new Promise(function(resolve,reject){
$("#modal-submit").on("click",function(e){
// resolve the promise with the value of the input field
resolve($("#modal-input").val());
})
})
}, inputfunTakesPrompt: true});
代码中的任何错误通常都会发送到输出前:
对于没有输入的正常错误,我得到了这个(这是我想要发生的):
但是,当我在代码中使用输入时,不会输出错误消息:
错误将不再显示,我收到以下错误:
有谁知道我如何解决这个问题或指出我正确的方向?
如果有帮助,我已将我的 skulpt.js 和 index.html 文件放在下面。
SkulptTest.js
// output functions are configurable. This one just appends some text
// to a pre element.
function outf(text) {
var mypre = document.getElementById("output");
mypre.innerHTML = mypre.innerHTML + text;
}
function builtinRead(x) {
if (Sk.builtinFiles === undefined || Sk.builtinFiles["files"][x] === undefined)
throw "File not found: '" + x + "'";
return Sk.builtinFiles["files"][x];
}
// Here's everything you need to run a python program in skulpt
// grab the code from your textarea
// get a reference to your pre element for output
// configure the output function
// call Sk.importMainWithBody()
function runit() {
var prog = editor.getValue(); ;
var mypre = document.getElementById("output");
mypre.innerHTML = '';
Sk.pre = "output";
Sk.configure({output:outf, read:builtinRead, __future__: Sk.python3, inputfun: function (prompt) {
clearModal();
addModalQuestion(prompt);
toggleModal();
// the function returns a promise to give a result back later...
return new Promise(function(resolve,reject){
$("#modal-submit").on("click",function(e){
// resolve the promise with the value of the input field
resolve($("#modal-input").val());
})
})
}, inputfunTakesPrompt: true});
(Sk.TurtleGraphics || (Sk.TurtleGraphics = {})).target = 'mycanvas';
var myPromise = Sk.misceval.asyncToPromise(function() {
try {
if (result = Sk.importMainWithBody("<stdin>", false, prog, true)) {
return result;
}
}
catch(e) {
outf(e.toString());
}
});
;
}
索引.html
<!DOCTYPE html>
<html>
<head>
<!--JQuery-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript"></script>
<!--Skulpt-->
<script src="skulpt/skulpt.min.js" type="text/javascript"></script>
<script src="skulpt/skulpt-stdlib.js" type="text/javascript"></script>
<!--Code Mirror-->
<script src="codemirror/lib/codemirror.js"></script>
<link href="codemirror/lib/codemirror.css" rel="stylesheet">
<script src="codemirror/mode/python/python.js"></script>
<link href="codemirror/theme/midnight.css" rel="stylesheet">
<!--My Styles-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Data Input</title>
<meta name="description" content="How do we input data in Python 3?">
<link href="css/reset.css" rel="stylesheet" type="text/css">
<style>
#editor-container {
width: 100vw;
height: 47vh;
}
#run-container {
width: 100vw;
height: 5vh;
background-color: #0a121f;
}
#run-container button {
float: right;
height: 5vh;
width: 15%;
background-color: yellow;
border: none;
border-radius: 5px;
}
#output-container {
width: calc(100vw - 10px);
height: calc(45vh - 10px);
background-color: aliceblue;
float: right;
background-color: #000;
color: #fff;
padding-left: 10px;
padding-top: 10px;
}
#output {
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}
</style>
<!--Modal-->
<link href="css/modal.css" rel="stylesheet" type="text/css">
</head>
<body>
<!--Skulp-->
<script src="skulptTest.js"></script>
<!--My Code-->
<div id="right-panel">
<div id="editor-container">
<div class="modal" id="modal">
<div class="modal-content">
<span class="close-button"></span>
<p id="modal-question" class="modal-question">Input Prompt</p>
<input type="text" id="modal-input" name="modal-input" class="modal-input">
<button id="modal-submit" class="modal-submit" onclick="toggleModal()">Submit</button>
</div>
</div>
<textarea id="editor"></textarea>
</div>
<div id="run-container">
<button type="button" onclick="runit()">Run</button>
</div>
</div>
<div id="output-container">
<pre id="output"></pre>
</div>
<!-- Code Mirror-->
<script src="js/code-mirror.js"></script>
<script>editor.setValue("name = input('What is your name?')\nprint(name)");</script>
</body>
</html>
<script src="js/modal.js"></script>
我还附上了下面所有文件的链接。
如果有人可以帮助我,我将不胜感激
提前致谢,
肖恩