Загрузка и загрузка в CodeMirror Textarea и Sketch Execution Issues

Ответ 1

Вот фрагмент кода

var delay;

// Initialize CodeMirror editor
var editor = CodeMirror.fromTextArea(document.getElementById('code'), {
  mode: {
    name: "python",
    version: 2,
    singleLineStringErrors: false
  },
  tabMode: 'indent',
  lineNumbers: true,
  lineWrapping: true,
  autoCloseTags: true
});

// Live preview
editor.on("change", function() {
  clearTimeout(delay);
  delay = setTimeout(updatePreview, 300);
});

function updatePreview() {
  var previewFrame = document.getElementById('preview');
  var preview = previewFrame.contentDocument || previewFrame.contentWindow.document;
  preview.open();
  preview.write(editor.getValue());
  preview.close();
}
setTimeout(updatePreview, 300);

function saveTextAsFile() {
  var textToWrite = editor.getValue();
  var textFileAsBlob = new Blob([textToWrite], {
    type: "text/plain;charset=utf-8"
  });
  var fileNameToSaveAs = document.getElementById("pile").value + ".py";

  var downloadLink = document.createElement("a");
  downloadLink.download = fileNameToSaveAs;
  downloadLink.innerHTML = "Download File";
  if (window.webkitURL != null) {
    // Chrome allows the link to be clicked
    // without actually adding it to the DOM.
    downloadLink.href = window.webkitURL.createObjectURL(textFileAsBlob);
  } else {
    // Firefox requires the link to be added to the DOM
    // before it can be clicked.
    downloadLink.href = window.URL.createObjectURL(textFileAsBlob);
    downloadLink.onclick = destroyClickedElement;
    downloadLink.style.display = "none";
    document.body.appendChild(downloadLink);
  }

  downloadLink.click();
}

function destroyClickedElement(event) {
  document.body.removeChild(event.target);
}

function loadfile(input) {
  var reader = new FileReader();
  reader.onload = function(e) {
    editor.setValue(e.target.result);
  };
  reader.readAsText(input.files[0]);
}

var input = document.getElementById("select");

function selectTheme() {
  var theme = input.options[input.selectedIndex].innerHTML;
  editor.setOption("theme", theme);
}

var choice = document.location.search &&
  decodeURIComponent(document.location.search.slice(1));
if (choice) {
  input.value = choice;
  editor.setOption("theme", choice);
}

//COPIED AND EDITED ALL THE BELOW FROM SKULPT
// output functions are configurable.  This one just appends some text
// to a pre element.
function outf(text) {
  var mypre = document.getElementById("output");
  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];
  }
  // Here everything you need to run a python program in skulpt
  // grab the code from your textarea
  // get a reference to your pre element for output
  // configure the output function
  // call Sk.importMainWithBody()

function runit() {
  var prog = editor.getValue();
  var mypre = document.getElementById("output");
  mypre.innerHTML = '';
  Sk.pre = "output";
  Sk.configure({
    output: outf,
    read: builtinRead
  });
  (Sk.TurtleGraphics || (Sk.TurtleGraphics = {})).target = 'mycanvas';
  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 {
  float: left;
  width: 50%;
  border: 1px solid black;
}
iframe {
  width: 49%;
  float: left;
  height: 300px;
  border: 1px solid black;
  border-left: 0px;
}

<meta charset="utf-8">

<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>
<script src="skulpt-codemirror.js" type="text/javascript"></script>
<script src="load-save-py.js" type="text/javascript"></script>
<script src="insert.js" type="text/javascript"></script>
<link href="https://www.cs.princeton.edu/~dp6/CodeMirror/lib/codemirror.css" rel="stylesheet" type="text/css">

<input id="toup" type="file" onchange="loadfile(this)">
<button type="button" onclick="runit()">Run</button>
Enter File name to save as
<input id="pile" placeholder=" ....without .py extension">.py
<button type="button" onclick='saveTextAsFile()'>Save/Download</button>
<br>
<br>
<br>
<textarea id="code" name="code"></textarea>
<br>



<pre id="output"></pre> 
<!-- If you want turtle graphics include a canvas -->
<div id="mycanvas"></div>

Ответ 2

Используйте editor.getValue() и editor.setValue(textFromFileLoaded) вместо того, чтобы получать/устанавливать значение самого элемента "textbox".

Экземпляр CodeMirror почти полностью отделен от текстового поля, из которого он построен. Как вы видели, он не заметит изменений, внесенных в текстовое поле, и не будет распространять на него изменения, внесенные в редактор (за исключением, в частности, во время отправки формы).