[英]Downloading and Uploading in CodeMirror Textarea and Skulpt Execution Issues
[英]Add CodeMirror to Skulpt Textarea
我正在制作一个在线python编辑器。 我正在使用Skulpt运行用户输入到texarea中的代码。 这是我的代码:
HTML:
<script src="skulpt.min.js" type="text/javascript"></script>
<script src="skulpt-stdlib.js" type="text/javascript"></script>
<textarea id="textbox" cols="50" rows="10"></textarea>
<br />
<button type="button" onclick="runit()">Run</button>
<pre id="dynamicframe"></pre>
<div id="canvas"></div>
Javascript:
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 = "output";
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());
});
}
我是CodeMirror的新手,我想使用其python版本向我的textarea添加代码颜色,行号和缩进,但是对于如何更改代码以添加这些功能,我有点困惑我发现他们的网站对将其工具连接到textareas有点模糊。
如何在我现有的文本区域旁边使用CodeMirror?
这就是我添加Codemirror来突出显示文本区域中匹配的括号的方式:
var editor = CodeMirror.fromTextArea(document.getElementByid('textbox'), {
mode: 'none',
matchBrackets: true,
dragDrop: false,
styleSelectedText: false,
showCursorWhenSelecting: true,
lineWrapping: true
});
var textAreaContents = editor.getDoc().getValue();
那就是我要做的。 您可以调整配置以适应它,例如,设置模式将以特定的编程语言突出显示和可选地智能缩进文本。
这是显示行号和缩进的python模式下的Codemirror设置的小提琴: https ://jsfiddle.net/gw0shwok/2/
此处记录了Python的配置选项
附加功能可通过几个插件获得
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.