Когда я редактирую код в TextArea с помощью CodeMirror, как отразить это в другой текстовой области с помощью js или jQuery

Question

Приложение: У меня есть элемент textarea на моей странице. Он преобразуется с помощью CodeMirror, потому что мне нужно сделать отступ и выделить HTML-код внутри него. Pic находится в ссылке: [текстовая область с использованием codemirror]

http://uploadingit.com/file/gxftd2cps9wm7zhp/cm.png

Вот код для textarea с использованием codemirror:

</textarea>
    <button type="submit">Post</button>       
</form>
 <script>

   var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
     mode: { name: "xml", htmlMode: true },
     lineNumbers: true,
     tabMode: "indent",
     matchBrackets: true,
     path: 'js/', 
     searchMode: 'inline',
     onCursorActivity: function () {
       editor.setLineClass(hlLine, null);
       hlLine = editor.setLineClass(editor.getCursor().line, "activeline");
     }
   });

   var hlLine = editor.setLineClass(0, "activeline");
  </script>

Как это сделать?: Когда я нажимаю кнопку Post, весь код должен быть передан в другую текстовую область. Мне нужно это сделать с JavaScript или JQuery, но изо всех сил, как это сделать. Любая помощь?

Для реального приложения код в этой текстовой области (см. Рис. Выше) должен влиять на Html Designer API. Т.е. любые изменения в конструкторе HTML должны быть отражены в этой области текста (которая использовала codemirror для удобства чтения) и наоборот. Когда я редактирую в текстовой области, изменения должны отражаться в HtmlDesigner, но в этом случае симуляции -> во второй текстовой области.

Пример: подобно редактору кода Visual Studio .Net WebPage с режимом «Дизайнер + исходный код». Теперь понятно?

Я спрашиваю , как реализовать механизм, описанный выше, используя javascript или jquery. Большое спасибо!

Answer 1

Передайте параметр onChange в CodeMirror, который выглядит примерно так:

onChange: function (cm) {
   mySecondTextArea.value = cm.getValue();
}

Отредактировано, чтобы отметить: Начиная с версии 2.0 CodeMirror, вы больше не передаете параметр onChange для регистрации обработчика изменений,но вместо этого позвоните instance.on("change", function(cm, change) { ... }).http://codemirror.net/doc/manual.html#event_change

Answer 2

Последняя выпущенная версия (v 3.15) работает с этим решением:

// on and off handler like in jQuery
CodemirrorInstance.on('change',function(cMirror){
  // get value right from instance
  yourTextarea.value = cMirror.getValue();
});

Answer 3

Работает эта работа CodeMirror 5.22.0:

CodeMirror.fromTextArea(document.getElementById('grammar'), {
    lineNumbers: true,
    mode: 'pegjs',
}).on('change', editor => {
    console.log(editor.getValue());
});

Answer 4

обработка onChange в зеркале кода не такая:

onChange: function(cm) { mySecondTextArea.value = cm.getValue(); }

вы должны использовать:

$.fn.buildCodeMirror = function(){
    var cmOption {...};
    var cm = CodeMirror($("MyDomObjectSelector")[0],cmOption);
    cm.on("change",$.fn.cmChange);
}

$.fn.cmChange = function(cm,cmChangeObject){
    alert("code mirror content has changed");
}

Answer 5

То есть вы хотите скопировать текст из одной TextArea (которая, кстати, отображается как input) в другую?

//Set the button to call a Javascript function when it is clicked
<button type="submit" onclick="copyText();">Post</button>

<script type="text/javascript">
    function copyText() {
        //Get the text in the first input
        var text = document.getElementById("firstTextArea").getValue(); 
        //Can't use .value here as it returns the starting value of the editor

        //Set the text in the second input to what we copied from the first
        document.getElementById("secondTextArea").value = text;
    }
</script>

Answer 6

Вы можете использовать это ...

var editor_js = CodeMirror.fromTextArea(document.getElementById("js"), {
   mode: 'text/javascript',
   theme: 'icecoder',
   styleActiveLine: true,
   lineNumbers: true,
   lineWrapping: true,
});

и получить данные с editor_js.getValue()