當我使用CodeMirror在TextArea中編輯代碼時如何使用js或jQuery將此代碼反映到另一個textarea中

應用程序：我的頁面中有一個textarea元素。它使用CodeMirror進行轉換，因爲我需要縮進並突出顯示html代碼。 PIC是在鏈接： [textarea的使用codemirror]當我使用CodeMirror在TextArea中編輯代碼時如何使用js或jQuery將此代碼反映到另一個textarea中

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>

怎麼辦呢？：當我點擊發布按鈕，所有的代碼應該被傳輸到另一個textarea。我需要這樣做與JavaScript或jQuery，但掙扎如何做到這一點。任何幫助？

對於真實世界的應用程序此textarea中的代碼（來自上圖）應該會影響Html Designer API。即Html設計器中的任何更改都應反映在此textarea中（爲了便於閱讀，它使用了codemirror），反之亦然。當我在textarea中編輯更改時應該體現在HtmlDesigner中，但是在這個模擬案例中 - >在第二個textarea中。

例如：像Visual Studio .Net網頁代碼編輯器，它具有Designer + Source模式。現在很清楚了嗎？

我在問如何使用javascript或jquery實現上述機制。非常感謝！

來源

2011-07-24 A.Mano

所以你想從一個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>

來源

2011-07-25 00:29:43

謝謝。這是行得通的，但行爲： –

代碼出現在第二個textarea從第一次只有當我把代碼放入Visual Studio中的textarea。但在現實世界中，該網站的用戶將在第一個textarea中插入一些代碼，並在第二個txtarea中出現以編輯它，然後按下Post按鈕。它應該去第一個。那麼如何檢測用戶插入的內容以及如何用JS控制呢？：）謝謝。 –

嗯，這很有趣......你點擊按鈕時，textarea仍然被選中？如果是這樣，請點擊按鈕之前嘗試點擊文本區域（因此模糊）。如果它仍然無法正常工作，那麼我會認爲它是一個CodeMirror特性，它返回的是舊值而不是新值 - 按照Marijn的建議嘗試getValue（）可能是個好主意。 –

傳遞一個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-25 06:04:30 Marijn

哇！很高興聽到作者:)但仍然誤解：1.我需要寫另一個這個新的功能（釐米）？ 2. mySecondTextArea可以是一個簡單的textarea或者另一個使用cm的工作。 –

方案：我在簡單的textarea中插入代碼。當我按下Post按鈕時，代碼應該到使用代碼鏡像的textarea，以便它可以很好地編輯。在編輯之後，再次按下另一個Save Changes按鈕時，代碼應該在第一個textarea中出現（例如在IDE操作區:)）。 –

對不起，新手問題。但是這個機制在js中的功能和代碼是什麼？我上網瀏覽js，但這次需要更快。：）謝謝。 –

的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-04 12:03:51

最新發布的版本在此刻（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-10 23:14:51

您可以使用此...

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

並獲取數據隨着 editor_js.getValue()

來源

2015-08-08 20:59:31

這個工程工作CodeMirror 5.22.0：

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

來源

2016-12-30 23:37:05 mpen

當我使用CodeMirror在TextArea中編輯代碼時如何使用js或jQuery將此代碼反映到另一個textarea中

回答

相關問題