codemirror 5.2版本实现自定义提示

1.页面引入相关JS文件

2.初始化codemirror

需要一个原生textarea作为codemirror的初始化容器。

this.editor = CodeMirror.fromTextArea(document.getElementById('code'), {
  lineNumbers: false,	// 不显示行号
  extraKeys: {'Ctrl': 'autocomplete'},	// 切换默认提示快捷键
  theme: 'sqlTheme',	// 主题风格
  lineWrapping: true,	// 自动换行
  autofocus: true,
});

3.设置自动提示

this.editor.on('cursorActivity', () => {
  if (this.editor.getValue() != this.editorData.content) {
    this.editor.showHint(this.handleShowHint());	// 传入处理自动提示的函数
  }
});

handleShowHint () {
  const cur = this.editor.getCursor();	// 获取当前最新输入
  const curLine = this.editor.getLine(cur.line);	// 获取当前所在行数
  const end = cur.ch;	// 获取最新输入结束位置
  const start = end - 1;	// 设置检测输入的起始位置（本案例中只检测最新输入的一个字符）
  const word = curLine.charAt(start);	// 获取最新输入的内容（本案例中为最新输入的一个字符）
  // list为筛选出的自动提示项的数组
  const list = this.paramsData.filter(param => {
    return param.indexOf(word) > -1;
  });

  return {
    hint: function() {
      return {
        from: CodeMirror.Pos(cur.line, start),	// 需要自动替换的起始位置（本案例中为最新输入的一个字符的位置）
        to: CodeMirror.Pos(cur.line, end),	// 需要自动替换的终止位置（本案例中为当前输入最末端）
        list,	// 由自动提示项组成的数组
      }
    }
  };
}

其他注意点

给codemirror设置新文本后，需要调用refresh方法，才能更新显示内容。

this.editor.setValue(val);
setTimeout(() => {
  this.editor.refresh();
}, 200);

参考资料

CodeMirror 一些简单配置

CodeMirror sql智能提示功能修改