Skulpt runit（）按钮与CodeMirror冲突吗？ [英] Skulpt runit() button conflicting with CodeMirror?
问题描述
我正在使用Skulpt和CodeMirror创建一个浏览器（静态）Python编辑器。到目前为止，这是代码：
I am making an in-browser (static) Python editor with Skulpt and CodeMirror. Here is the code for it so far:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript">
</script>
<script src="http://www.skulpt.org/static/skulpt.min.js" type="text/javascript">
</script>
<script src="http://www.skulpt.org/static/skulpt-stdlib.js" type="text/javascript">
</script>
<script src="https://www.cs.princeton.edu/~dp6/CodeMirror/lib/codemirror.js" type="text/javascript">
</script>
<script src="https://www.cs.princeton.edu/~dp6/CodeMirror/mode/python/python.js" type="text/javascript">
</script>
<link href="https://www.cs.princeton.edu/~dp6/CodeMirror/lib/codemirror.css" rel="stylesheet" type="text/css">
<title></title>
</head>
<body>
<script type="text/javascript">
function outf(text) {
var mypre = document.getElementById("dynamicframe");
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];
}
function runit() {
var prog = document.getElementById("textbox").value;
var mypre = document.getElementById("dynamicframe");
mypre.innerHTML = '';
Sk.pre = "dynamicframe";
Sk.configure({
output: outf,
read: builtinRead
});
(Sk.TurtleGraphics || (Sk.TurtleGraphics = {})).target = 'canvas';
var myPromise = Sk.misceval.asyncToPromise(function() {
return Sk.importMainWithBody("<stdin>", false, prog, true);
});
myPromise.then(function(mod) {
console.log('success');
},
function(err) {
console.log(err.toString());
});
}
//<![CDATA[
window.onload = function() {
CodeMirror.fromTextArea(document.getElementById('textbox'), {
mode: {
name: "python",
version: 2,
singleLineStringErrors: false
},
lineNumbers: true,
indentUnit: 4
});
} //]]>
</script>
<textarea id="textbox" name="textbox"></textarea>
<br>
<button onclick="runit()" type="button">Run</button>
<pre id="dynamicframe"></pre>
<div id="canvas"></div>
</body>
</html>
使用< button> ，调用 onclick = runit（） ，但单击时根本不执行任何操作。我直接从他们的网站（ skulpt.org ）中提取了skulpt代码，并从小提琴中提取了CodeMirror部分（ https://jsfiddle.net/gw0shwok/2/ ）。当我在单击按钮时调用 runit（）函数时，它们似乎在某种程度上相互冲突。为什么是这样？如何解决该问题？
With the <button>, I call onclick="runit()" but it does not do anything at all when clicked. I took the skulpt code directly from their website (skulpt.org) and the CodeMirror parts from a fiddle (https://jsfiddle.net/gw0shwok/2/). They seem to conflict each other in some way when I call the runit() function on a button click. Why is this? How can I fix the issue?
到实时编辑器的链接： http://ckdata.neocities.org/python.html
A link to my live editor: http://ckdata.neocities.org/python.html
推荐答案
这对我有用：
// Step 1: Declare a variable to hold the editor:
<script type="text/javascript">
var editor;
function outf(text) {...
然后在创建代码镜像编辑器时保存它：
Then save the codemirror editor when it's created:
// Step 2 : Save the codemirror object in the editor.
window.onload = function() {
editor = CodeMirror.fromTextArea(document.getElementById('textbox'), {
mode: {...
最后使用codemirror API在 runit 回调中获取编辑器的内容：
Finally use the codemirror API to get the contents of the editor in the runit callback:
function runit() {
var prog = editor.getDoc().getValue(); // Use codemirror API
var mypre = document.getElementById("dynamicframe");
我：这是输出
这是整个修改后的代码：
Here is the entire modified code:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript">
</script>
<script src="http://www.skulpt.org/static/skulpt.min.js" type="text/javascript">
</script>
<script src="http://www.skulpt.org/static/skulpt-stdlib.js" type="text/javascript">
</script>
<script src="https://www.cs.princeton.edu/~dp6/CodeMirror/lib/codemirror.js" type="text/javascript">
</script>
<script src="https://www.cs.princeton.edu/~dp6/CodeMirror/mode/python/python.js" type="text/javascript">
</script>
<link href="https://www.cs.princeton.edu/~dp6/CodeMirror/lib/codemirror.css" rel="stylesheet" type="text/css">
<title></title>
</head>
<body>
<script type="text/javascript">
var editor;
function outf(text) {
var mypre = document.getElementById("dynamicframe");
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];
}
function runit() {
var prog = editor.getDoc().getValue();
var mypre = document.getElementById("dynamicframe");
mypre.innerHTML = '';
Sk.pre = "dynamicframe";
Sk.configure({
output: outf,
read: builtinRead
});
(Sk.TurtleGraphics || (Sk.TurtleGraphics = {})).target = 'canvas';
var myPromise = Sk.misceval.asyncToPromise(function() {
return Sk.importMainWithBody("<stdin>", false, prog, true);
});
myPromise.then(function(mod) {
console.log('success');
},
function(err) {
console.log(err.toString());
});
}
//<![CDATA[
window.onload = function() {
editor = CodeMirror.fromTextArea(document.getElementById('textbox'), {
mode: {
name: "python",
version: 2,
singleLineStringErrors: false
},
lineNumbers: true,
indentUnit: 4
});
} //]]>
</script>
<textarea id="textbox" name="textbox"></textarea>
<br>
<button onclick="runit()" type="button">Run</button>
<pre id="dynamicframe"></pre>
<div id="canvas"></div>
</body>
</html>
这篇关于Skulpt runit（）按钮与CodeMirror冲突吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
![输出](\"https://s4.postimg.io/hvl11m3vx/Output.png\"){kind=link}