每次内容更改时代码镜像获取当前行号

Question

我正在尝试使用 Code Mirror 创建文本编辑器。我想在显示屏底部向用户显示当前行号，就像文本编辑器一样。

到目前为止，我已经尝试过：

function updateInfo(){
var lines = editor.lineCount();
document.getElementById('line-no.').innerText = lines;
editor.refresh();
}
editor.on("change", updateInfo());

line-no. 是 span，我想在其中显示行号。这适用于第一个行号，但是当我转到其他行时，它什么也没做。控制台显示此错误：

codemirror.js:2154 Uncaught TypeError: Cannot read property 'apply' of undefined
at codemirror.js:2154
at fireCallbacksForOps (codemirror.js:2111)
at finishOperation (codemirror.js:2125)
at endOperation (codemirror.js:3747)
at HTMLTextAreaElement.<anonymous> (codemirror.js:3884)

Answer 1

更新

要在编辑器中跟踪更新，请在 cursorActivity 事件上注册一个处理程序。当光标或选择发生变化时会触发此事件。
使用 CodeMirror 的实例调用处理程序；在此您可以调用 getCursor 方法作为一个对象，该对象包含光标处于活动状态的当前行号。
请注意，行号是从零开始的，因此您可能会或可能不会将其增加 1。

const STATUS_CURRENT_LINE = document.getElementById('line-no.');

const onCursorActivity = (instance) => {
  const cursor = cm.getCursor();
  STATUS_CURRENT_LINE.textContent = cursor.line + 1;
}

editor.on("cursorActivity", onCursorActivity);

---

当编辑器中的文档发生变化时设置当前行号

发生错误是因为在您注册之前调用了updateInfo 回调。这样注册为回调的值为undefined。

editor.on('change', updateInfo()) // -> editor.on('change', undefined)

这可以通过注册函数来解决。

editor.on('change', updateInfo)

但是，回调的签名应该遵循文档中的内容。

The change callback 被传递给 CodeMirror 的 instance 和一个 changeObject，您可以从中检索当前行。

"change" (instance: CodeMirror, changeObj: object)
每次更改编辑器的内容时​​触发。 changeObj 是一个 {from, too, text, removed, origin} 对象，其中包含有关作为第二个参数发生的更改的信息。 from 和 to 是更改开始和结束的位置（在更改前坐标系中）（例如，如果位置在第 19 行的开头，则可能是 {ch:0, line:18}）。 text 是一个字符串数组，表示替换更改范围的文本（按行分割）。 removed 是以前位于 from 和 to 之间的文本，此更改将覆盖该文本。此事件在 DOM 更新发生之前的操作结束之前触发。

const STATUS_CURRENT_LINE = document.getElementById('line-no.');

function updateInfo(instance, changeObj){
   STATUS_CURRENT_LINE.innerText = changeObj.to.line;
}

editor.on("change", updateInfo);