Codemirror gutter 中的动态行数在每秒钟按下一次键时为空

Question

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

Video of issue

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());

说明：

原行的作用是：

1234563 ）。

• 如果info.gutterMarkers是truthy（例如<div>50</div>），那么该行将调用setGutterMarker将该行的标记设置为null。

  李>

由于info.gutterMarkers 是当前行的标记（也就是说，每次调用setGutterMarker时都会修改它），该行在两种情况之间切换（首先标记是假的，所以将其设置为<div>50</div>，然后标记为真，因此将其设置为null，然后标记为假，因此将其设置为<div>48</div>...)。这就是导致您观察到的交替行为的原因 - 间隔标记设置为 null 每按一次。