Question

我的任务是建立一个音符输入区域，在该区域中我应该在每行中显示行数和字符数。我选择了Codemirror来做。一切正常，但每按一次按键，行字符计数似乎就消失了。我已将视频链接附加到该问题，并且代码粘贴在下面。谢谢

var count;
var textEditor = CodeMirror(document.getElementById('noteArea'), {
  lineNumbers: true,
  autofocus: true,
  gutters: ["CodeMirror-linenumbers", "lineLength"],
  lineWrapping: true
});

textEditor.on("cursorActivity", function(cm, change) {
  var doc = cm.getDoc();
  var cursor = doc.getCursor();
  count = 50 - cursor.ch
  var line = cursor.line
  var info = cm.lineInfo(line);
  cm.setGutterMarker(line, "lineLength", info.gutterMarkers ? null : makeMarker());

  function makeMarker() {
    var marker = document.createElement("div");
    marker.style.color = countColor(count);
    marker.innerHTML = count || "●";
    return marker;
  }

  function countColor(count){
    if (count < 0 ) {
      return "#822"
    } else {
      return "green"
    }
  }

  // var line = doc.getLine(cursor.line);
})

Answer 1

错误是这一行：

cm.setGutterMarker(line, "lineLength", info.gutterMarkers ? null : makeMarker());

解决方案：

如果您希望标记始终是makeMarker()的结果，只需删除三元：

cm.setGutterMarker(line, "lineLength", makeMarker());

说明：

原始行的作用是：

如果info.gutterMarkers是虚假（例如null），则此行将调用setGutterMarker将此行的标记设置为{{ 1}}（例如makeMarker()）。
如果<div>50</div>是真实（例如info.gutterMarkers），则此行将调用<div>50</div>将该行的标记设置为{{1} }。

由于setGutterMarker 是当前行的标记（也就是说，每次调用null时都会对其进行修改），因此该行在两种情况之间切换（第一种情况标记是虚假的，因此将其设置为info.gutterMarkers，然后标记是真实的，因此将其设置为setGutterMarker，然后标记是虚假的，因此将其设置为<div>50</div>。 ..）。这就是导致您观察到交替行为的原因-装订线标记每秒钟按一次设置为null。

每次按键，Codemirror装订线中的动态行数为空

1 个答案: