当我使用 CodeMirror 在 TextArea 中编辑代码时，如何使用 js 或 jQuery 将其反映到另一个 textarea 中

Posted 2023-02-22

【中文标题】当我使用 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

【发布时间】：2011-10-12 03:56:22

【问题描述】：

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

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 以提高可读性），反之亦然。当我在 textarea 中编辑时，更改应该会反映在 HtmlDesigner 中，但在这个模拟案例中 -> 在第二个 textarea 中。

示例： 像 Visual Studio .Net 网页代码编辑器，它具有 Designer + Source 模式。现在清楚了吗？

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

【参考方案1】：

这适用于 CodeMirror 5.22.0：

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

【参考方案2】：

您可以使用它...

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

并获取数据 editor_js.getValue()

【参考方案3】：

将 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

【讨论】：

哇！很高兴收到作者的来信 :) 但还是有误会： 1. 我需要再写一个这个新函数（cm）？ 2. mySecondTextArea 可以是一个简单的文本区域，也可以是另一个使用 cm 来工作的区域。

场景：我在一个简单的文本区域中插入代码。当我按下发布按钮时，代码应该转到使用代码镜像的文本区域，以便可以很好地编辑它。再次编辑后，当按下另一个 Save Changes 按钮时，代码应该在第一个文本区域中显示为已更改（就像在 IDE 游乐场中一样:)）。

抱歉新手问题。但是js中这个机制的功能和代码是什么？我确实为 js 浏览网页和书籍，但这次需要它更快。 :) 谢谢。

codemirror.net/manual.html - onChange(function) 给定时，每次编辑器内容改变时都会调用这个函数。它将被赋予编辑器实例作为唯一参数。

自此评论以来 API 是否发生了变化？使用 onChange : function(cm) alert("foo"); 似乎对我不起作用

【参考方案4】：

目前最新发布的版本 (v 3.15) 适用于此解决方案：

// on and off handler like in jQuery
CodemirrorInstance.on('change',function(cMirror)
  // get value right from instance
  yourTextarea.value = cMirror.getValue();
);

【参考方案5】：

代码镜像中的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");

【参考方案6】：

所以您想将文本从一个 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>

【讨论】：

只有当我将代码放在 Visual Studio 的 textarea 中时，代码才会出现在第二个 textarea 中。但在现实世界中，该站点的用户将在第一个 textarea 上插入一些代码，这些代码应该出现在第二个 txtarea 中，以便在按下 Post 按钮时对其进行编辑。它应该去第一个。那么如何检测用户插入了什么以及如何使用 JS 来控制呢？ :) 谢谢。

嗯，这很有趣...您是否在仍选择文本区域时单击按钮？如果是这样，请在单击按钮之前尝试单击文本区域（使其模糊）。如果它仍然无法正常工作，那么我会假设它是 CodeMirror 功能，它返回旧值而不是新值 - 按照 Marijn 的建议尝试 getValue() 可能是个好主意。

啊，是的，使用 getValue() - codemirror.net/manual.html - .value 是编辑器的起始值。我将编辑我的答案以反映这一点。

非常感谢！我正在和你们这些极客一起学习。

它就是这样工作的 :) 记住，一旦你选择了正确的答案，就接受答案 ;) 祝你的代码好运！