CodeMirrorを使用してTextAreaのコードを編集すると、これを別のテキストエリアにjsまたはjQueryで反映する方法

Question

The App：私のページにはtextarea要素があります。 CodeMirrorを使用して変換されます。なぜなら、HTMLコードをインデントし強調表示する必要があるからです。 picがリンクしている：私はクリックすると、それを行うにはどのように

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

？：： [codemirrorを使用してテキストエリア]ここ

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

はcodemirrorを使用してテキストエリアのコードですポストボタン、すべてのコードは別のテキストエリアに送信する必要があります。私はこれをjavascriptやjQueryと一緒に使う必要がありますが、それをやり遂げる方法は苦労しています。どんな助け？

実際のアプリケーションの場合このテキストエリアのコード（上の写真から）はHtml Designer APIに影響します。 Htmlデザイナーでの変更は、このテキストエリア（読みやすさのためにコードミラーを使用したもの）とその反対に反映する必要があります。テキストエリアで編集すると、HtmlDesignerに反映されるはずですが、このシミュレーションケースでは、> 2番目のテキストエリアに反映されます。

例： Visual Studio .Net WebPageのようなDesigner + Sourceモードのコードエディタ。今それは明らかですか？

私は上記のメカニズムをjavascriptまたはjqueryを使用して実装する方法を質問しています。大変ありがとう！

Answer 1

TextArea（これはinputコントロールとしてレンダリングされます）から別のTextAreaにテキストをコピーしますか？

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

次のようになりますどのCodeMirrorへのonChangeオプションを渡します。

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

編集注：CodeMirrorバージョン2.0以来、あなたは変更ハンドラを登録するにはもうonChangeオプションを渡しません、代わりにinstance.on("change", function(cm, change) { ... })に電話してください。 http://codemirror.net/doc/manual.html#event_change

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

Answer 4

最終（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 5

これは使用できます。

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

そして editor_js.getValue()

Answer 6

によるデータの取得これは、作業CodeMirror 5.22.0に動作します：

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