ng2-codemirror

Angular2 Codemirror component

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
ng2-codemirror
71231.1.37 years ago8 years agoMinified + gzip package size for ng2-codemirror in KB

Readme

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