ng2-ace-editor

发表于

angular的 aec 代码编辑器

下载

1
npm i ng2-ace-editor --save

引入

在根module引入整个AceEditorModule模块, 🌰:

1
2
3
4
5
6
7
8
9
10
11
12
import { AceEditorModule } from 'ng2-ace-editor';
 
@NgModule({
  imports: [
    // ... 
    AceEditorModule
  ],
  declarations: [  ],
  providers: [  ]
})
export class AppModule {
}

使用, 在模板中设置参数:

1
2
3
4
5
6
7
8
9
10
<div ace-editor
     [(text)]="text"
     [mode]="'sql'"
     [theme]="'eclipse'"
     [options]="options"
     [readOnly]="false"
     [autoUpdateContent]="true"
     [durationBeforeCallback]="1000"
     (textChanged)="onChange($event)"
     style="min-height: 200px; width:100%; overflow: auto;"></div>

在ts中设置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
@Component({
    template: `
  <ace-editor
       [(text)]="text" // possible two way binding (thx ChrisProlls)
        #editor style="height:150px;"></ace-editor>
  `
})
export class AceCmp {
    @ViewChild('editor') editor;
    text: string = "";

    ngAfterViewInit() {
        this.editor.setTheme("eclipse");

        this.editor.getEditor().setOptions({
            enableBasicAutocompletion: true
        });

        this.editor.getEditor().commands.addCommand({
            name: "showOtherCompletions",
            bindKey: "Ctrl-.",
            exec: function (editor) {

            }
        })
    }
}