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

• config : The configuration object for CodeMirror see http://codemirror.net/doc/manual.html#config

Licence

See LICENSE file