28

アプリ:ページに textarea 要素があります。HTMLコードをインデントして強調表示する必要があるため、CodeMirrorを使用して変換されます。写真はリンクにあります：[codemirrorを使用したテキストエリア]

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 デザイナーでの変更はすべて、このテキストエリア (読みやすさのために codemirror を使用) に反映する必要があり、その逆です。テキストエリアで編集すると、変更が HtmlDesigner に反映されるはずですが、このシミュレーションの場合 -> 2 番目のテキストエリアで。

例: Designer + Source モードを備えた Visual Studio .Net WebPage Code Editor など。今、それは明らかですか？

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

4

6 に答える 6

39

次のような 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

于 2011-07-25T06:04:30.213 に答える
25

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

// on and off handler like in jQuery
CodemirrorInstance.on('change',function(cMirror){
  // get value right from instance
  yourTextarea.value = cMirror.getValue();
});
于 2013-08-10T23:14:51.157 に答える
15

これは CodeMirror 5.22.0 で動作します:

CodeMirror.fromTextArea(document.getElementById('grammar'), {
    lineNumbers: true,
    mode: 'pegjs',
}).on('change', editor => {
    console.log(editor.getValue());
});
于 2016-12-30T23:37:05.883 に答える
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");
}
于 2013-04-04T12:03:51.463 に答える
1

inputある TextArea (ちなみに、これはコントロールとしてレンダリングされます) から別の 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>
于 2011-07-25T00:29:43.747 に答える