@postfinance/ngx-ace-editor-wrapper

Ace editor integration with TypeScript for Angular 10.


- Examples
- Installation
- Usage
- Hat Tips
- License

Examples

There is a live example available on GitHub Pages.

Installation

npm i @postfinance/ngx-ace-editor-wrapper

$3

``ts
import { AceEditorModule } from '@postfinance/ngx-ace-editor-wrapper';

@NgModule({
...
imports: [
...
AceEditorModule
]
})
`

Usage

$3

> Minimal

`ts
// import { AceEditorModule } from '@postfinance/ngx-ace-editor-wrapper';

import { Component } from '@angular/core'

@Component({
template:

`ts
import { Component } from '@angular/core'

// Imports are important! You may configure it via angular.json as well.
import 'brace'
import 'brace/mode/sql'
import 'brace/theme/eclipse'

@Component({
template:

onChange(code) {
console.log('new code', code)
}
}
`

$3

`ts
import { Component, ViewChild } from '@angular/core'

import { AceEditorComponent } from '@postfinance/ngx-ace-editor-wrapper'

// Imports are important!
import 'brace'

@Component({
template:


,
})
export class AceCmp {
@ViewChild(AceEditorComponent)
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) {},
})
}
}
`

Hat Tips

- To Andrei Tumilovich for the original Angular 9 integration: tavwizard/ace-editor-ng9
- To Timon Borter for the Angular 10 migration: bbortt/ngx-ace-editor-wrapper`

License

This project is licensed under the terms of the Apache 2.0 License.