将CodeMirror添加到Skulpt Textarea
将CodeMirror添加到Skulpt Textarea
提问于 2016-08-18 07:26:49
我正在制作一个在线的python编辑器。我使用Skulpt来运行用户输入到文本区域的代码。这是我的代码：
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版本向我的文本区域添加代码着色、行号和缩进，但我对如何修改代码以添加这些功能感到有点困惑，因为我发现他们的网站在将他们的工具连接到文本区域方面有点模糊。
如何在现有文本区域的同时使用CodeMirror？
回答 1
Stack Overflow用户
回答已采纳
发布于 2016-08-18 07:51:03
下面是我添加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(); 这就是我所要做的。您可以调整配置，以调整配置，例如，设置模式将突出显示特定编程语言中的可选智能缩进文本。
下面是用lineNumbers和缩进在python模式下显示codemirror设置的小提琴：https://jsfiddle.net/gw0shwok/2/
Python的配置选项有文档化的这里
通过几个插件可以获得额外的功能
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/39012243
复制相关文章
相似问题
腾讯云开发者
