【CodeMirror】CodeMirror的一些方法使用

初始化

this.editor = CodeMirror.fromTextArea(myTextArea);

设置编辑框内容

this.editor.setValue(this.commandData);

设置编辑器滚动位置

this.editor.scrollTo(x, y);  // x轴 y轴

遍历设置编辑框的指令内容整行高亮

const lineStyle = this.editor.getSearchCursor(/指令类型/gi, 0);
this.changeStyle(lineStyle); // 第一行高亮

// vue方法
// 遍历改变style
changeStyle(lineStyle) {
  if (lineStyle.find()) {
    this.editor.markText({ line: lineStyle.from().line, ch: 0 }, { line: lineStyle.from().line + 1, ch: 0 }, {
      className: 'notChange', // 添加类型
      readOnly: true, // 只读
    });
    this.changeStyle(lineStyle); // 递归遍历
  }
},

// 设置style样式
/deep/ .notChange{
    background:rgb(66, 100, 102);
}

设置编辑状态

this.editor.setOption('readOnly', true); // 不可编辑
this.editor.setOption('readOnly', false); // 可编辑

获取编辑框的内容

this.editor.getValue();

如果遇到序号混乱，解决

setTimeout(() => {
     this.editor.refresh();
 });

// 设置fromTextArea属性
autoRefresh: true

设置光标位置

this.editor.setCursor(2);

codemirror给第六行设置颜色

this.editor.markText({
  line: 5,
  ch: 0,
  }, {
  line: 6,
  ch: 0,
  }, {
  className: 'wrap', // 添加class类
  css: 'color : red' // 添加css
});