Как использовать codemirror в Vue.js для отправки номера строки? - PullRequest
Новая
       24

Как использовать codemirror в Vue.js для отправки номера строки?

0 голосов
/ 05 мая 2019

Я хочу использовать codemirror в Vue.js для реализации двух текстовых областей. Когда я выбираю какой-либо код строки в area1, тот же код строки в area2 должен быть выделен.

example

1 Ответ

0 голосов
/ 05 мая 2019

Я придумаю два примера.

Во-первых, синхронизировать выбор:

Добавить прослушиватель событий для события cursorActivity всякий раз, когда этот триггер события получает подробности выбора методом getCursor, а затем устанавливает его во второй редактор методом setSelection. 

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

Пример

Во-вторых, выделите строки выбора:

Опять же, добавьте прослушиватель событий для события 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();
  }
});

Пример * +1031 *

Я не очень знаком с CodeMirror, но надеюсь, что это поможет.

...