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
};