当我使用CodeMirror在TextArea中编辑代码时，如何使用js或jQuery将其反映到另一个textarea中 [英] When I edit the code in a TextArea using CodeMirror how to reflect this into another textarea with js or jQuery

问题描述

应用程序:我的页面中有一个textarea元素.它使用CodeMirror进行了转换，因为我需要缩进并突出显示html代码.图片在链接中:[使用codemirror的textarea]

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]

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

这是使用codemirror进行textarea的代码:

Here is the code for textarea using 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>

操作方法?:当我单击发布"按钮时，所有代码都应传输到另一个文本区域.我需要用javascript或jQuery来做这件事，但是却很难做到这一点.有帮助吗?

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?

对于真实世界的应用，此文本区域中的代码(来自上图)应该会影响Html Designer API.即HTML设计器中的任何更改都应反映在该文本区域(使用codemirror来提高可读性)中，反之亦然.当我在文本区域中进行编辑时，更改应反映在HtmlDesigner中，但在此模拟情况下->在第二个文本区域中.

For the real world app the 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.

示例:类似于具有Designer + Source模式的Visual Studio .Net WebPage代码编辑器.现在很清楚吗?

Example: like Visual Studio .Net WebPage Code Editor which has Designer + Source mode. Now it's clear?

我正在问，该如何使用javascript或jquery实现上述机制.非常感谢！

I'm asking how to implement the mechanism described above using javascript or jquery. Thank you much!

推荐答案

将onChange选项传递给CodeMirror，它看起来像这样:

Pass an onChange option to CodeMirror which looks something like this:

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

经编辑以注意:自CodeMirror 2.0版以来，您不再传递 onChange 选项来注册更改处理程序，而是调用 instance.on("change"，function(cm，请更改){...}). http://codemirror.net/doc/manual.html#event_change

Edited to note: Since CodeMirror version 2.0, you don't pass an onChange option anymore to register a change handler, but call instance.on("change", function(cm, change) { ... }) instead. http://codemirror.net/doc/manual.html#event_change

这篇关于当我使用CodeMirror在TextArea中编辑代码时，如何使用js或jQuery将其反映到另一个textarea中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！