Wenn ich den Code in einer TextArea mit CodeMirror bearbeite, wie kann ich dies mit js oder jQuery in eine andere Textarea reflektieren

Question 1

Die App: Ich habe ein Textarea-Element in meiner Seite. Es wird mit CodeMirror transformiert, da ich darin HTML-Code einrücken und hervorheben muss. Bild ist im Link:
[textarea using codemirror]

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

Hier ist der Code für Textarea mit 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>

Wie es geht?: Wenn ich auf die Schaltfläche Post klicke, sollte der gesamte Code in ein anderes Textfeld übertragen werden. Ich brauche dies, um mit Javascript oder jQuery zu tun, habe aber Schwierigkeiten, wie es geht. Irgendeine Hilfe?

Für die Real-World-App Der Code in diesem Textbereich (von Bild oben) sollte sich auf die Html Designer API auswirken. dh alle Änderungen im HTML-Designer sollten in diesem Textbereich (der Codemirror für die Lesbarkeit verwendet) widergespiegelt werden und umgekehrt. Wenn ich im Textbereich bearbeite, sollten sich Änderungen im HtmlDesigner widerspiegeln, aber in diesem Simulationsfall -> im zweiten Textbereich.

Beispiel: wie Visual Studio .Net WebPage Code Editor mit Designer + Source-Modus. Jetzt ist es klar?

ich frage wie man den oben beschriebenen Mechanismus mit Javascript oder jquery implementiert. Vielen Dank!

Question 2

Übergeben Sie eine onChange-Option an CodeMirror, die etwa so aussieht:

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

Bearbeitet, um zu beachten: Seit CodeMirror Version 2.0 übergeben Sie keine onChange Möglichkeit nicht mehr, einen Änderungshandler zu registrieren, sondern aufrufen instance.on("change", function(cm, change) { ... }) stattdessen. http://codemirror.net/doc/manual.html#event_change

Question 3

Die derzeit letzte veröffentlichte Version (v 3.15) funktioniert mit dieser Lösung:

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

Question 4

Dies funktioniert mit CodeMirror 5.22.0:

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

Question 5

Die Handhabung von onChange im Code-Mirror ist nicht so:

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

du musst verwenden:

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

Question 6

Sie möchten also Text aus einer TextArea kopieren (die als input Kontrolle übrigens) zu einem anderen?

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

Question 7

Sie können dies verwenden …

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

Und erhalten Sie Daten mit
editor_js.getValue()