0

我正在制作一个在线 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？

4

1 回答 1

1

这就是我添加 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 模式下使用 lineNumbers 和缩进显示 codemirror 设置的小提琴：https ://jsfiddle.net/gw0shwok/2/

Python 的配置选项记录在这里

额外的功能可以通过几个插件获得

于 2016-08-18T07:51:03.990 回答