angular2-ace

angular2 components for ace editor

Required

<script src="//cdn.bootcss.com/ace/1.2.5/ace.js"></script>

Usage

import { LAceEditorModule } from 'angular2-ace';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    LAceEditorModule
  ],
  declarations: [
    AppComponent
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Template

<l-ace-editor [mode]="mode" [options]="aceOption" [(ngModel)]="editValue"></l-ace-editor>

Typescript

export class AppComponent {

  private aceOption: any;
  private mode: string = "text";
  private editValue: string = "hello";

  constructor() {

  }

  ngOnInit() {
    this.aceOption = {
      readonly: false,
      theme: 'twilight',
      onLoaded: (editor) => {
        editor.$blockScrolling = Infinity
        editor.setOptions({
          minLines: 15,
          maxLines: 25
        })
      },
      onChange: (e) => {

      }
    }
  }
}

Options Define

export interface IAceEditorOption {
  readonly: boolean;
  theme: string;
  fontSize: number;  
  tabSize: number;
  enableEmmet: boolean;
  enableSnippets: boolean;
  showPrintMargin: boolean;
  onLoaded: Function;
  onChange: Function;
}