/ng2-codemirror

Angular2 CodeMirror component

Primary LanguageTypeScriptMIT LicenseMIT

Angular - Codemirror component

Use the CodeMirror (5.x) code editor in your Angular application.

Demo : https://embed.plnkr.co/8e9gxss9u10VeFrv29Zt/

Installation

  • Include Codemirror javascript files in your application (with files for modes)
  • Install ng2-codemirror
    • JSPM : jspm install npm:ng2-codemirror
    • NPM : npm install ng2-codemirror

Dependencies

CodeMirror library is required for this component :

  • Install via NPM : npm install codemirror
  • Install via JSPM : jspm install npm:codemirror

CodeMirror need to be accessible by import 'codemirror'

Then you need to include base CSS of codemirror located in codemirror/lib/codemirror.css

Sample

Include CodemirrorModule in your main module :

import { CodemirrorModule } from 'ng2-codemirror';

@NgModule({
  // ...
  imports:      [
    CodemirrorModule
  ],
  // ...
})
export class AppModule { }
import { Component } from 'angular2/core';

@Component({
  selector: 'sample',
  template: `
    <codemirror [(ngModel)]="code"
      [config]="{...}"
      (focus)="onFocus()"
      (blur)="onBlur()">
    </codemirror>
  `
})
export class Sample{
  constructor(){
    this.code = `// Some code...`;
  }
}

Configuration

Licence

See LICENSE file