Javascript 当我使用 CodeMirror 在 TextArea 中编辑代码时，如何使用 js 或 jQuery 将其反映到另一个 textarea 中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6809289/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
When I edit the code in a TextArea using CodeMirror how to reflect this into another textarea with js or jQuery
提问by A.Mano
The App:I have a textarea element in my page. It is transformed using CodeMirror, because I need to indent and highlight html code withing it. Pic is in the link: [textarea using codemirror]
应用程序：我的页面中有一个 textarea 元素。它使用 CodeMirror 进行转换，因为我需要使用它缩进和突出显示 html 代码。图片在链接中：[textarea using codemirror]
http://uploadingit.com/file/gxftd2cps9wm7zhp/cm.png
http://uploadingit.com/file/gxftd2cps9wm7zhp/cm.png
Here is the code for textarea using codemirror:
这是使用 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>
How to do it?:When I click Post button, all the code should be transmitted to another textarea. I need this to do with javascript or jQuery, but struggling how to do it. Any Help?
怎么做？：当我点击发布按钮时，所有的代码都应该传输到另一个文本区域。我需要这与 javascript 或 jQuery 相关，但正在努力如何做到这一点。任何帮助？
For the real world appthe code in this textarea (from pic above) should affect the Html Designer API. i.e. Any changes in Html designer should be reflected in this textarea (which used codemirror for readability) and the opposite. When I edit in the textarea changes should be reflected in HtmlDesigner, but in this simulation case -> in the second textarea.
对于现实世界的应用程序，此文本区域中的代码（来自上图）应该会影响 Html Designer API。即 Html 设计器中的任何更改都应反映在此 textarea（使用 codemirror 以提高可读性）中，反之亦然。当我在 textarea 中编辑时，更改应该反映在 HtmlDesigner 中，但在这个模拟案例中 -> 在第二个 textarea 中。
Example:like Visual Studio .Net WebPage Code Editor which has Designer + Source mode. Now it's clear?
示例：例如具有设计器 + 源代码模式的 Visual Studio .Net 网页代码编辑器。现在清楚了吗？
I'm askinghow to implement the mechanism described above using javascript or jquery. Thank you much!
我在问如何使用 javascript 或 jquery 实现上述机制。非常感谢！
回答by Marijn
Pass an onChange option to CodeMirror which looks something like this:
将 onChange 选项传递给 CodeMirror，如下所示：
onChange: function (cm) {
mySecondTextArea.value = cm.getValue();
}
Edited to note: Since CodeMirror version 2.0, you don't pass an onChangeoption anymore to register a change handler, but call instance.on("change", function(cm, change) { ... })instead. http://codemirror.net/doc/manual.html#event_change
编辑注意：从 CodeMirror 2.0 版开始，您不再传递onChange选项来注册更改处理程序，而是调用instance.on("change", function(cm, change) { ... })。http://codemirror.net/doc/manual.html#event_change
回答by Николай Конев
Last released version at moment (v 3.15) works with this solution:
目前最新发布的版本（v 3.15）适用于以下解决方案：
// on and off handler like in jQuery
CodemirrorInstance.on('change',function(cMirror){
// get value right from instance
yourTextarea.value = cMirror.getValue();
});
回答by mpen
This works work CodeMirror 5.22.0:
这适用于 CodeMirror 5.22.0：
CodeMirror.fromTextArea(document.getElementById('grammar'), {
lineNumbers: true,
mode: 'pegjs',
}).on('change', editor => {
console.log(editor.getValue());
});
回答by To delete profile
onChange handling in code mirror is not like this :
代码镜像中的 onChange 处理不是这样的：
onChange: function(cm) { mySecondTextArea.value = cm.getValue(); }
you have to use :
你必须使用：
$.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");
}
回答by Brian Beckett
So you want to copy text from one TextArea (which renders as an inputcontrol, by the way) to another?
因此，您想将文本从一个 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>
回答by Mrawan Elboshy
You Can Use This ...
你可以用这个...
var editor_js = CodeMirror.fromTextArea(document.getElementById("js"), {
mode: 'text/javascript',
theme: 'icecoder',
styleActiveLine: true,
lineNumbers: true,
lineWrapping: true,
});
And Get Data With
editor_js.getValue()
并获取数据
editor_js.getValue()
