javascript - 当我使用 CodeMirror 编辑 TextArea 中的代码时，如何使用 js 或 jQuery 将其反射(reflect)到另一个文本区域中

Question

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

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 设计器中的任何更改都应反射(reflect)在该文本区域中(为了可读性而使用了 codemirror)，反之亦然。当我在文本区域中编辑时，更改应该反射(reflect)在 HtmlDesigner 中，但在这个模拟案例中 -> 在第二个文本区域中。

示例:如 Visual Studio .Net 网页代码编辑器，具有设计器 + 源模式。现在清楚了吗？

我问如何使用 javascript 或 jquery 实现上述机制。非常感谢!

Answer 1

将 onChange 选项传递给 CodeMirror，如下所示:

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

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