Skulpt runit() button conflicting with CodeMirror?

61 views
Skip to first unread message

Daniel Harrin

unread,
Aug 21, 2016, 10:06:58 AM8/21/16
to Skulpt

I am making an in-browser (static) Python editor with Skulpt and CodeMirror. Here is the code for it so far:


<!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">import turtle
t = turtle.Turtle()
t.forward(100)

print("Hello World")</textarea>
    <br>
    <button onclick="runit()" type="button">Run</button>
    <pre id="dynamicframe"></pre>
    <div id="canvas"></div>
</body>

</html>

With the <button>, I call onclick="runit()" but it does not do anything at all when clicked. I took the skulpt code directly from their website (skulpt.org) and the CodeMirror parts from a fiddle (https://jsfiddle.net/gw0shwok/2/). They seem to conflict each other in some way when I call the runit() function on a button click. Why is this? How can I fix the issue?

Yehonathan Sharvit

unread,
Aug 21, 2016, 11:08:47 PM8/21/16
to Skulpt
CodeMirror replaces the original element.
In order to get the value of the element created by CodeMirror, you have to call getValue()  on the element created by Code Mirror.

Here is the code revised:

<!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 codeMirrorElement;
       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 = codeMirrorElement.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() {
               codeMirrorElement = CodeMirror.fromTextArea(document.getElementById('textbox'), {
                   mode: {
                       name: "python",
                       version: 2,
                       singleLineStringErrors: false
                   },
                   lineNumbers: true,
                   indentUnit: 4
               });
           } //]]>
   </script>
   <textarea id="textbox" name="textbox">import turtle
t = turtle.Turtle()
t.forward(100)

print("Hello World")</textarea>
   <br>
   <button onclick="runit()" type="button">Run</button>
   <pre id="dynamicframe"></pre>
   <div id="canvas"></div>
</body>

</html>
Reply all
Reply to author
Forward
0 new messages