Skulpt runit() button conflicting with CodeMirror?
Question: 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"></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](http://www.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?

A link to my live editor: <http://ckdata.neocities.org/python.html>


Answer: This worked for me:

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

Then save the codemirror editor when it's created:

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

Finally use the codemirror API to get the contents of the editor in the
`runit` callback:

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

This worked for me: here is the
[output](https://s4.postimg.io/hvl11m3vx/Output.png)

Here is the entire modified code:

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

