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

Question

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

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 是 falsy（例如 null），则此行将调用 setGutterMarker 来设置此行的makeMarker() 结果的标记（例如 <div>50</div>）。
如果info.gutterMarkers是truthy（例如<div>50</div>），那么这一行会调用setGutterMarker来设置这个行的标记为 null.

由于 info.gutterMarkers 是当前行的标记 （也就是说，每次调用 setGutterMarker 时它都会被修改），该行在两种情况（第一个标记是假的，所以它设置为 <div>50</div>，然后标记是真，所以它设置为 null，然后标记是假的，所以它设置为 <div>48</div>...）。这就是导致您观察到的交替行为的原因——装订线标记设置为 null 每按一次。

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

Dynamic line counts in Codemirror gutter is empty every second time the key is pressed

javascript

codemirror

codemirror-modes

ui-codemirror