从@ctrl/ngx-codemirror 库，如何使用 typeScript 和 angular 获取 codeMirror 实例 5

Question

我正在使用来自 https://github.com/TypeCtrl/ngx-codemirror

的代码镜像包装器

我正在尝试获取 Codemirror 或编辑器的实例来编辑一些操作，但我无法获取实例。

相关问题：Get CodeMirror instance

我需要在单击按钮时在当前光标位置添加文本，因此需要 CodeMirror API。

Answer 1

我已经解决了这个问题。按照以下步骤获取实例：

import * as CodeMirror from 'codemirror';

在您的 html 文件中标记您的代码镜像实例：

    <ngx-codemirror #codeeditor
                [(ngModel)]="somemodel"
                [options]="someoptions"
                [autoFocus]=true
                (change)="callBackFunc()"
                (cursorActivity)="functionCall()">
</ngx-codemirror>

使用 view-child 读取实例

@ViewChild('codeeditor') private codeEditor;

然后就可以在相关函数中获取编辑器对象了：

const editor = this.codeEditor.codeMirror;
const doc = editor.getDoc();

确保不要在 ngOnInit() 中使用它，而是在 ngAfterViewInit() 中使用它和 setTimeOut()，因为编辑器只有在视图完全加载后才可用。

从@ctrl/ngx-codemirror 库，如何使用 typeScript 和 angular 获取 codeMirror 实例 5

From @ctrl/ngx-codemirror library, how to get the codeMirror instance with typeScript and angular 5

codemirror

typescript

angular5