Skulpt runit()按钮与codemmirror冲突
Skulpt runit() button conflicting with CodeMirror?
我正在使用Skulpt和CodeMirror制作浏览器内(静态)Python编辑器。下面是目前为止的代码:
<!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)和codemmirror部分(https://jsfiddle.net/gw0shwok/2/)中获取了skulpt代码。当我在按钮点击上调用runit()
函数时,它们似乎以某种方式相互冲突。为什么会这样?我如何解决这个问题?
链接到我的实时编辑器:http://ckdata.neocities.org/python.html
这对我有用:
// Step 1: Declare a variable to hold the editor:
<script type="text/javascript">
var editor;
function outf(text) {...
然后在创建代码镜像编辑器时保存它:
// Step 2 : Save the codemirror object in the editor.
window.onload = function() {
editor = CodeMirror.fromTextArea(document.getElementById('textbox'), {
mode: {...
最后使用codemmirror API在runit
回调中获取编辑器的内容:
function runit() {
var prog = editor.getDoc().getValue(); // Use codemirror API
var mypre = document.getElementById("dynamicframe");
这对我有用:下面是输出
下面是修改后的全部代码:
<!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>
相关文章:
- Javascript-ID冲突的几率
- 导致内容安全策略(CSP)冲突错误的本地jquery.js文件
- Pg承诺性能提升:在冲突中
- 数据与Javascript中的继承冲突
- Angular ng控制器与ng应用程序冲突
- 返回按钮代码段的Jquery冲突
- 调试一个简单的jQuery函数;想知道是否与其他代码冲突
- 使用JavaScript和HTML5画布进行冲突检测
- javascript对象原型与jquery冲突
- jQuery与导航菜单上的mouseover事件冲突.
- Javascript滑块不滑动,如何判断是否存在JS冲突
- Bing语音和Bing地图在Windows 8应用商店应用程序中冲突
- Javascript两个日期选择器冲突
- Sequelize:属性之间的命名冲突'播放列表'以及关联'播放列表'
- 2D Processingjs游戏中的冲突
- 为什么'滚动到顶部'脚本导致类型错误?jQuery冲突
- 防止WordPress javascript冲突的良好实践
- JQuery手风琴菜单与mmenu冲突-JQuery 1.4 vs 1.7
- Greasemonkey1.0中的jQuery与使用jQuery的网站冲突
- Skulpt runit()按钮与codemmirror冲突