2016-08-21 5 views
0

私はSkulptとCodeMirrorでブラウザ内(静的)のPythonエディタを作っています。ここではこれまでにそれのためのコードです:<button>CodeMirrorと衝突するrunit()ボタンをスキップしますか?

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

が、私はonclick="runit()"を呼び出すが、クリックされたとき、それは全く何もしません。私は自分のウェブサイト(skulpt.org)から直接スケートコードを取り出し、フィドル(https://jsfiddle.net/gw0shwok/2/)のCodeMirrorパーツを取り出しました。私はボタンクリックでrunit()関数を呼び出すと、何らかの形で互いに衝突するようです。どうしてこれなの?問題を解決するにはどうすればよいですか?

私のライブエディタへのリンク:http://ckdata.neocities.org/python.html

+0

これをしてください試してみてください: 'VARエディタ= CodeMirror.fromTextAreaすなわちcodemirrorエディタに参照してくださいここではここoutput

は、全体の変更されたコードです(...) '次に、コード' var prog = editor.getDoc()。getValue();を使用します。テキストエリアの内容を取得します。 – Dhananjay

+0

@Dhananjayは全く動作しません。私の編集者へのリンクは以下の通りです:http://ckdata.neocities.org/python.html –

+0

私のために働きました:[出力](https://s4.postimg.io/hvl11m3vx/Output.png)のこのスナップショットを確認してください)私のブラウザで: – Dhananjay

答えて

0

これは私のために働いた:それが作成されますとき

// 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: {... 

最後にcodemirrorのAPIを使用しますrunitコールバックでエディタのコンテンツを入手してください:

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

は、これが私の仕事:

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

ありがとう、私とあなたのコードを結合したサンプルページを教えてもらえますか? –

+0

回答に貼って – Dhananjay

+0

そのおかげで本当に役に立ちました –

関連する問題