Добавить CodeMirror в Skulpt Textarea

Question

Я делаю онлайн-редактор python. Я использую Skulpt для запуска кода, введенного пользователем в texarea. Вот мой код:

HTML:

<script src="skulpt.min.js" type="text/javascript"></script> 
<script src="skulpt-stdlib.js" type="text/javascript"></script> 
<textarea id="textbox" cols="50" rows="10"></textarea> 
<br /> 
<button type="button" onclick="runit()">Run</button> 
<pre id="dynamicframe"></pre> 
<div id="canvas"></div> 

Javascript:

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 = "output"; 
    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()); 
     }); 
} 

Я новичок в CodeMirror, и я хотел бы использовать их питона версию, чтобы добавить код расцветку , нумерация строк и отступы в моем текстовом поле, но я немного смущен относительно того, как я собираюсь изменить свой код, чтобы добавить эти функции, так как я нахожу их сайт немного расплывчатым при подключении их инструмента к текстовым областям.

Как я могу использовать CodeMirror рядом с существующим текстовым полем?

Answer 1

Это, как я добавил CodeMirror, чтобы выделить соответствующие скобки в моем текстовом поле:

var editor = CodeMirror.fromTextArea(document.getElementByid('textbox'), { 
         mode: 'none', 
         matchBrackets: true, 
         dragDrop: false, 
         styleSelectedText: false, 
         showCursorWhenSelecting: true, 
         lineWrapping: true 
        }); 
var textAreaContents = editor.getDoc().getValue(); 

Вот все, что я должен был сделать. Вы можете настроить конфигурацию, чтобы настроить ее, например. установка mode отобразит и, возможно, текст с интеллектуальным отступом на определенном языке программирования.

Вот скрипка, которая показывает установку CodeMirror в режиме питона с номера строк и отступов: https://jsfiddle.net/gw0shwok/2/

Параметры конфигурации для Python документируются here

Дополнительные функциональные возможности доступны через несколько addons