如何在CodeMirror的onUpdateLinting lint回调中获取textarea元素

解决方案 #

你遇到的cm.getTextArea is not a function报错，核心原因是只有通过CodeMirror.fromTextArea()方法初始化的CodeMirror 5实例才会内置getTextArea()方法，如果是直接挂载到DOM元素初始化的实例、或是使用CodeMirror 6版本，都不存在这个API。同时部分版本的lint插件回调传入的cm参数是精简的实例对象，确实会缺失部分挂载方法。

推荐你用更稳妥的闭包/自定义属性方案解决，不需要依赖实例内置API：

方案1：初始化时绑定自定义属性（兼容所有CM5场景） #

在创建CodeMirror实例时，直接把对应textarea的引用挂载到实例的自定义属性上，回调中直接读取即可：

// 先拿到目标textarea元素
const targetTextarea = document.querySelector('#your-textarea-id')
// 初始化CM实例
const cm = CodeMirror.fromTextArea(targetTextarea, {
  // 其他配置项...
  lint: {
    onUpdateLinting: function (annotationsNotSorted, annotations, cm) {
      const errCnt = annotationsNotSorted.length;
      console.log(errCnt + " errors");
      // 直接读取提前挂载的自定义属性
      const textArea = cm._bindTextarea;
      // 后续匹配标签页错误展示元素的逻辑正常写
    }
  }
})
// 初始化完成后给实例挂载自定义属性存textarea引用
cm._bindTextarea = targetTextarea;

方案2：直接用闭包拿作用域变量（兼容CM5/CM6所有场景） #

多标签页场景下每个标签的CodeMirror实例都是独立初始化的，直接在每个实例的初始化作用域里存好对应textarea、错误数展示元素的引用，回调里直接调用即可，不需要从cm参数取值：

// 每个标签初始化时单独执行的逻辑
function initTabCodeMirror(textareaId, errCountElId) {
  const textArea = document.getElementById(textareaId);
  const errCountEl = document.getElementById(errCountElId);
  const cm = CodeMirror.fromTextArea(textArea, {
    lint: {
      onUpdateLinting: function (annotationsNotSorted) {
        const errCnt = annotationsNotSorted.length;
        // 直接用当前作用域的元素引用即可
        errCountEl.textContent = errCnt + '个错误';
      }
    }
  })
  return cm;
}

// 每个标签初始化时调用对应方法传入专属的元素ID
initTabCodeMirror('tab1-textarea', 'tab1-err-count');
initTabCodeMirror('tab2-textarea', 'tab2-err-count');

内容的提问来源于stack exchange，提问作者Vanquished Wombat