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

Приложение: У меня есть элемент textarea на моей странице. Он преобразуется с помощью CodeMirror, потому что мне нужно отступы и выделить html-код с его помощью. Pic находится по ссылке: [textarea using 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>

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

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

Пример:, например Visual Studio.Net WebPage Code Editor, который имеет режим Designer + Source. Теперь ясно?

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

Ответы

Ответ 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

Ответ 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();
});

Ответ 3

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

Ответ 4

Итак, вы хотите скопировать текст из одного 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>

Ответ 5

Эта работа работает CodeMirror 5.22.0:

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

Ответ 6

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

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

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