28

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

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 网页代码编辑器。现在清楚了吗？

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

4

6 回答 6

39

将 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-25T06:04:30.213 回答
25

目前最新发布的版本（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-10T23:14:51.157 回答
15

这适用于 CodeMirror 5.22.0：

CodeMirror.fromTextArea(document.getElementById('grammar'), {
    lineNumbers: true,
    mode: 'pegjs',
}).on('change', editor => {
    console.log(editor.getValue());
});
于 2016-12-30T23:37:05.883 回答
3

代码镜像中的 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-04T12:03:51.463 回答
1

因此，您想将文本从一个 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-25T00:29:43.747 回答
0

你可以用这个...

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

并获取数据 editor_js.getValue()

于 2015-08-08T20:59:31.373 回答