web-dev-qa-db-ja.com

CodeMirrorを使用してTextAreaのコードを編集するとき、jsまたはjQueryを使用してこれを別のtextareaに反映する方法

App：ページにtextarea要素があります。それをインデントしてhtmlコードを強調表示する必要があるため、CodeMirrorを使用して変換されます。 Picはリンクにあります：[codemirrorを使用したtextarea]

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

Codemirrorを使用したtextareaのコードは次のとおりです。

</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で行う必要がありますが、それを行う方法に苦労しています。何か助けは？

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

例：デザイナ+ソースモードを備えたVisual Studio .Net WebPageコードエディタのように。今では明らかですか？

JavaScriptまたはjqueryを使用して上記のメカニズムを実装する方法を質問しています。どうもありがとうございました！

javascriptjqueryasp.netvisual-studio-2010codemirror
20
A.Mano

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

_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

32
Marijn

現時点で最後にリリースされたバージョン（v 3.15）はこのソリューションで動作します。

// on and off handler like in jQuery
CodemirrorInstance.on('change',function(cMirror){
  // get value right from instance
  yourTextarea.value = cMirror.getValue();
});
21
Николай Конев

これは、CodeMirror 5.22.0で機能します。

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

コードミラーでの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");
}
2
To delete profile

つまり、ある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>
1
Brian Beckett

あなたはこれを使うことができます...

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

editor_js.getValue()でデータを取得する

0
Mrawan Elboshy