Skip to content

worktile/ng-codemirror

Repository files navigation

Angular - Codemirror component

codemirror component for Angular(^8.0+)

Has been formally verified by the production environment。

Features

  • 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).

Alternatives

  • ngx-codemirror: An Angular component wrapper for CodeMirror that extends ngModel.

Installation

$ npm i ng-codemirror --save
// or
$ yarn add ng-codemirror

Usage

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