angular5 - Từ thư viện @ctrl/ngx-codemirror, làm thế nào để lấy instance codeMirror với TypeScript và angular 5

Tôi đang sử dụng trình bao code-mirror từ https://github.com/TypeCtrl/ngx-codemirror

Tôi đang cố gắng lấy thể hiện của Codemirror hoặc Trình soạn thảo để chỉnh sửa một số hành động nhưng tôi không thể lấy được thể hiện.

câu hỏi liên quan: Lấy thể hiện CodeMirror

Tôi cần chèn một đoạn văn bản tại vị trí con trỏ hiện tại khi nhấn nút, vì vậy cần sử dụng các API của CodeMirror.

Câu trả lời #1

Tôi đã giải quyết vấn đề này. Thực hiện các bước dưới đây để lấy phiên bản:

import * as CodeMirror from 'codemirror';

Gắn thẻ phiên bản code mirror của bạn trong tệp html:

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

Đọc ví dụ với view-child

@ViewChild('codeeditor') private codeEditor;

Sau đó bạn có thể lấy đối tượng trình chỉnh sửa trong hàm liên quan:

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

Hãy đảm bảo bạn không sử dụng nó trong ngOnInit(), thay vào đó hãy sử dụng nó trong ngAfterViewInit() với setTimeOut() vì trình chỉnh sửa chỉ có thể sử dụng được sau khi view tải xong hoàn toàn.

Câu trả lời #2

Tôi đã sử dụng câu trả lời được chấp nhận trong nhiều năm nhưng sau khi cập nhật lên phiên bản mới nhất của ngx-codeMirror(7.0.0), câu trả lời được chấp nhận đã ngừng hoạt động đối với tôi. codeMirrorComponent.codeMirror vẫn được báo là undefined trong phương thức AfterViewInit.

Bây giờ, có một eventEmitter tiện lợi cho codeMirrorLoaded mà bạn có thể sử dụng để tránh bất kỳ điều kiện tranh chấp nào với việc thiết lập.

<ngx-codemirror ...
      (codeMirrorLoaded)="setCodeMirrorEvents($event)">
    </ngx-codemirror>

Sau đó bạn có thể lấy phiên bản như thế này

setCodeMirrorEvents(editor: CodemirrorComponent){
    const codeMirror = editor.codeMirror; //get editor from component

  }