Angular 5 + TypeScript下如何获取@ctrl/ngx-codemirror的CodeMirror实例

我之前用ngx-codemirror的时候也踩过这个坑，想要调用原生CodeMirror的API，关键是要拿到封装组件暴露出来的原生实例，而不是自己去DOM里找元素硬初始化。下面是具体的实现步骤：

1. 引入必要的依赖和装饰器 #

在你的Angular组件文件顶部，引入ViewChild和ngx-codemirror的组件类：

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { NgxCodemirrorComponent } from '@ctrl/ngx-codemirror';

2. 给模板中的编辑器添加引用标识 #

在你的组件模板里，给<ngx-codemirror>标签加上模板引用变量，比如#editor：

<ngx-codemirror #editor [options]="yourEditorOptions"></ngx-codemirror>
<button (click)="insertCustomText()">在光标处插入文本</button>

3. 获取编辑器实例并封装工具方法 #

在组件类里，用ViewChild获取刚才定义的组件实例，然后通过组件的codeMirror属性拿到原生CodeMirror实例。接着就可以用原生API实现插入文本的功能了：

@Component({
  // 你的组件元数据（selector、templateUrl等）
})
export class YourComponent implements AfterViewInit {
  // 自定义编辑器配置（根据你的业务需求调整）
  yourEditorOptions = {
    lineNumbers: true,
    mode: 'javascript',
    theme: 'default'
  };

  // 通过模板引用获取ngx-codemirror组件实例
  @ViewChild('editor') private editorComponent!: NgxCodemirrorComponent;

  ngAfterViewInit() {
    // 组件渲染完成后才能确保实例可用，这里可以做一些初始化操作
  }

  // 封装获取原生CodeMirror实例的便捷方法
  private get codeMirrorInstance() {
    return this.editorComponent.codeMirror;
  }

  // 点击按钮触发的插入文本方法
  insertCustomText() {
    const cm = this.codeMirrorInstance;
    if (!cm) return;

    // 获取当前光标位置
    const cursorPos = cm.getCursor();
    // 在光标位置插入指定文本
    const insertText = '你需要插入的内容';
    cm.replaceRange(insertText, cursorPos, cursorPos);
    // 可选：将光标移动到插入文本的末尾，提升用户体验
    cm.setCursor({
      line: cursorPos.line,
      ch: cursorPos.ch + insertText.length
    });
  }
}

关键注意点 #

ngx-codemirror这个封装库已经帮我们把原生CodeMirror实例封装在了组件的codeMirror属性里，完全不需要像原生CodeMirror那样通过CodeMirror.fromTextArea()去手动创建实例。只要通过ViewChild拿到组件实例，就能直接调用所有原生CodeMirror的API，比如replaceRange（插入/替换文本）、getCursor（获取光标位置）、setCursor（设置光标位置）等。

如果你的编辑器是动态渲染的（比如包裹在*ngIf指令里），记得给ViewChild加上static: false选项，或者确保在组件渲染完成后再去获取实例，避免出现实例未定义的情况。

内容的提问来源于stack exchange，提问作者Tanmoy Bhattacharjee