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

时间:2018-11-16 05:08:09

标签: javascript html css codemirror

我正在尝试使用代码镜像创建文本编辑器。我想在屏幕底部向用户显示当前行号,就像文本编辑器一样。

到目前为止,我已经尝试过:

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)

1 个答案:

答案 0 :(得分:2)

更新

  

要在编辑器中关注更新,请在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}对象,其中包含有关作为第二个参数发生的更改的信息。 fromto是更改开始和结束的位置(在更改前的坐标系中)(例如,如果位置在行的开头,则可能是{ch:0, line:18} #19)。 text是一个字符串数组,代表替换了更改范围(由行分隔)的文本。 removed是以前介于fromto之间的文本,此更改将覆盖该文本。在DOM更新发生之前,在操作结束之前会触发此事件。

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

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

editor.on("change", updateInfo);