如何在codemirror中显示行数答案

【问题标题】：How to show line count in codemirror如何在codemirror中显示行数
【发布时间】：2016-07-21 05:58:17
【问题描述】：

我在我的应用程序中使用 codemirror API，我试图显示总行数以及何时键入以计算新行，但它给了我另一件事

我使用这个脚本来获取数字的最后一个孩子，但是当我有 29 行时，它会显示这个 1234567891011121314151617181920212223242526272829 这不是我想要做的，我希望它只显示 29 而且 onkeydown 根本不起作用

  <script>
    $(document).ready(function(){
      var tolalline = $('.CodeMirror-linenumber:last-child').text();
      $('#hcunter').text(tolalline);
      $('#inputTextToSave').keydown(function(){
        var tolalline = $('.CodeMirror-linenumber:last-child').text();
        $('#hcunter').text(tolalline);
      }
                                  );
      $("#alterTool").click(function(){
        $("#EditTool").toggle(1000);
      });
    });
  </script>

代码镜像

<script>
    var editor = CodeMirror.fromTextArea(document.getElementById("inputTextToSave"), 
    {
        lineNumbers: true,
        viewportMargin: Infinity,
        //Theme
        styleActiveLine: true,
        matchBrackets: true,
        gutter: true
    });
</script>

【问题讨论】：

你能在你的代码中添加一个 jsfiddle 吗？

标签： javascript codemirror ui-codemirror

【解决方案1】：

要获取行数，您必须使用 css 选择器：

.CodeMirror-code > div:last-child div.CodeMirror-gutter-elt

因此，如果您想计算行数，您将覆盖 CodeMirror 配置的 extraKeys 属性中的 Enter 键。应该是：

  extraKeys:
  {
    Enter: function(){
      setTimeout(function() {
        var tolalline = $('.CodeMirror-code > div:last-child div.CodeMirror-gutter-elt').text();
        $('#hcunter').text(tolalline);
      }, 0);
      return CodeMirror.Pass;
    }
  }

我设置了一个 setTimeout 来创建必要的最小延迟。您现在不需要设置 onKeyDown 事件。

所有代码：

  var editor = CodeMirror.fromTextArea(document.getElementById("inputTextToSave"),
      {
        lineNumbers: true,
        viewportMargin: Infinity,
        //Theme
        styleActiveLine: true,
        matchBrackets: true,
        gutter: true,
        extraKeys:
        {
          Enter: function(){
            setTimeout(function() {
              var tolalline = $('.CodeMirror-code > div:last-child div.CodeMirror-gutter-elt').text();
              $('#hcunter').text(tolalline);
            }, 0);
            return CodeMirror.Pass;
          }
        }
      }
    );


$(document).ready(function(){
  var tolalline = $('.CodeMirror-code > div:last-child div.CodeMirror-gutter-elt').text();
  $('#hcunter').text(tolalline);
  $("#alterTool").click(function(){
    $("#EditTool").toggle(1000);
  });
});

我希望这是你想要的！ :-)

【讨论】：