如何在Vue.js中使用Codemirror发送行号？

Question

我想在Vue.js中使用codemirror来实现两个文本区域。当我在区域1中选择一些行代码时，在区域2中的相同行代码应突出显示。

Answer 1

我举了两个例子。

首先，同步选择：

只要此事件触发器通过cursorActivity方法获取选择详细信息，然后通过getCursor方法将其设置为第二个编辑器，则为setSelection事件添加事件监听器。

firstEditor.on("cursorActivity", () => {
  let head = this.ca.getCursor("head");
  let anchor = this.ca.getCursor("anchor");
  secondEditor.setSelection(anchor, head);
});

Example

第二行，突出显示选择行：

再次，只要此事件触发器通过cursorActivity方法获得选择的开始和结束行，然后为getCursor事件添加事件侦听器，然后在第二个编辑器中突出显示这些行。

要突出显示行，CodeMirror具有active-line选项启用的插件调用styleActiveLine。但不幸的是，我无法在多行中使用此功能，因此我针对这种情况进行了修改。

const WRAP_CLASS = "CodeMirror-activeline";
const BACK_CLASS = "CodeMirror-activeline-background";
const GUTT_CLASS = "CodeMirror-activeline-gutter";

const clearActiveLines = function() {
  for (let i = 0; i < this.lineCount(); i++) {
    this.removeLineClass(i, "wrap", WRAP_CLASS);
    this.removeLineClass(i, "background", BACK_CLASS);
    this.removeLineClass(i, "gutter", GUTT_CLASS);
  }
};

const setActiveLines = function(from, to) {
  clearActiveLines.call(this);
  for (let i = from; i <= to; i++) {
    this.addLineClass(i, "wrap", WRAP_CLASS);
    this.addLineClass(i, "background", BACK_CLASS);
    this.addLineClass(i, "gutter", GUTT_CLASS);
  }
};

CodeMirror.defineExtension("setActiveLines", setActiveLines);

CodeMirror.defineExtension("clearActiveLines", clearActiveLines);

然后使用它。

firstEditor.on("cursorActivity", () => {
  if (firstEditor.getSelection()) {
    let from = this.ca.getCursor("from");
    let to = this.ca.getCursor("to");
    secondEditor.setActiveLines(from.line, to.line);
  } else {
    secondEditor.clearActiveLines();
  }
});

Example

我对CodeMirror不太熟悉，但希望能有所帮助。