Skulpt runit() 按钮与 CodeMirror 冲突？答案

【问题标题】：Skulpt runit() button conflicting with CodeMirror?Skulpt runit() 按钮与 CodeMirror 冲突？
【发布时间】：2016-08-21 07:21:54
【问题描述】：

我正在使用 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) 获取了 skulpt 代码，并从小提琴 (https://jsfiddle.net/gw0shwok/2/) 获取了 CodeMirror 部分。当我在单击按钮时调用runit() 函数时，它们似乎以某种方式相互冲突。为什么是这样？我该如何解决这个问题？

我的实时编辑器的链接：http://ckdata.neocities.org/python.html

【问题讨论】：

请试一试：保留对代码镜像编辑器的引用，即var editor = CodeMirror.fromTextArea(...)，然后使用代码var prog = editor.getDoc().getValue(); 获取文本区域的内容。
@Dhananjay 不，这根本不起作用。我的编辑器的链接在这里：ckdata.neocities.org/python.html
为我工作：在我的浏览器上查看output 的快照：
您可以分享更改代码的链接吗？如果我将文本放在标记内，它会起作用，但如果我自己输入它就不会 - 然后它只会在默认文本仍在 textarea 内时运行
添加更改的代码作为答案（因为评论太长了）

标签： javascript codemirror skulpt

【解决方案1】：

这对我有用：

// Step 1: Declare a variable to hold the editor:
 <script type="text/javascript">
        var editor;
         function outf(text) {...

然后在创建后保存 codemirror 编辑器：

 // Step 2 : Save the codemirror object in the editor.
   window.onload = function() {
                editor = CodeMirror.fromTextArea(document.getElementById('textbox'), {
                    mode: {...

最后在runit回调中使用codemirror API获取编辑器的内容：

function runit() {
            var prog = editor.getDoc().getValue(); // Use codemirror API
            var mypre = document.getElementById("dynamicframe");

这对我有用：这是output

以下是修改后的全部代码：

<!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>

【讨论】：

谢谢，你能给出一个结合了你和我的代码的示例页面吗？
粘贴在答案中