codemirror component for Angular（^8.0+）
Has been formally verified by the production environment。
- support copy text in readOnly 'nocursor' mode.
- ensure init codemirror after nativeElement has been attached （codemirror need a real element width）.
- support flexiable height by autoMaxHeight.
- support all options by codemirror（^5.52.0）.
- ngx-codemirror: An Angular component wrapper for CodeMirror that extends ngModel.
$ npm i ng-codemirror --save // or $ yarn add ng-codemirror
Import CodemirrorModule and bring in the codemirror files for parsing the langague you wish to use.
In your NgModule:
import { NgModule } from '@angular/core'; import { CodemirrorModule } from 'ng-codemirror'; // add to imports: imports: [ BrowserModule, CodemirrorModule, ... ]
In your main.ts or at the root of your application, see documentation:
import "codemirror/mode/javascript/javascript"; import "codemirror/mode/markdown/markdown";
Import the scss file
@import "~ng-codemirror/index.scss";
Use The Component
<ng-codemirror [options]="options" [ngModel]="code" [autoMaxHeight]="300" ></ng-codemirror>
// options 配置 options = { lineNumbers: true, readOnly: false, // nocursor can not copy mode: 'javascript', autofocus: true, lineWiseCopyCut: true, cursorBlinkRate: 500 // hide cursor };