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) {

}
})
}
}