2

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

问题视频

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);
})
4

1 回答 1

2

错误是这一行：

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

解决方案：

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

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

解释：

原始行的作用是：

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

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

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

于 2018-07-10T15:47:01.720 回答