Ace editor auto completion into Angular 2?

user_5974595 0
Viewed 2648

I am using ace editor and trying to achieve auto-completion in editor. I tried with options but its not working and I am getting warnings.Any idea?

Ace Editor Component

import {
    Component, EventEmitter, Input, OnInit, Output, ViewChild
} from '@angular/core';

@Component({
    selector: 'neon-ace-editor',
    templateUrl: './ace-editor.component.html',
    styleUrls: ['./ace-editor.component.scss']
})
export class AceEditorComponent implements OnInit {
    @Input() mode = 'html';
    @Input() autoUpdateContent = true;
    @Input() content: string;
    @Output() onContentChange: EventEmitter<string> = new EventEmitter();
    @ViewChild('editor') editor;
    options = {
        enableBasicAutocompletion: true,
        enableSnippets: true,
        enableLiveAutocompletion: true
    };
    ngOnInit(): void {
        this.editor._editor.$blockScrolling = Infinity;
    }

    onContentChanging(): void {
        this.onContentChange.emit(this.content);
    }
}

Ace Editor Html

<ace-editor [(text)]="content"
            #editor
            (textChanged)="onContentChanging()"
            [options]="options"
            [autoUpdateContent]="autoUpdateContent"
            style="min-height: 500px; width:100%; font-size:18px;overflow: auto;"
            [mode]="mode"></ace-editor>

Issue:

Auto-complete is not working.

Warning messages in console

enter image description here

ace-editor angular
3 Answers

If you are using Angular 7.X the most important part of working with Ace Editor is to import scripts in angular.json file.

"scripts": [
                "node_modules/ace-builds/src-min/ace.js",
                "node_modules/ace-builds/src-min/mode-xml.js",
                "node_modules/ace-builds/src-min/mode-html.js",
                "node_modules/ace-builds/src-min/theme-vibrant_ink.js",
                "node_modules/ace-builds/src-min/snippets/xml.js",
                "node_modules/ace-builds/src-min/snippets/html.js",
                "node_modules/ace-builds/src-min/ext-beautify.js",
                "node_modules/ace-builds/src-min/ext-searchbox.js",
                "node_modules/ace-builds/src-min/ext-language_tools.js",
                { "bundleName": "worker-xml", "input": "node_modules/ace-builds/src-min/worker-xml.js" },
                { "bundleName": "worker-html", "input": "node_modules/ace-builds/src-min/worker-html.js" }
            ]

If you doesn't wont autocomlete option you can omit this two lines:

                "node_modules/ace-builds/src-min/ext-searchbox.js",
                "node_modules/ace-builds/src-min/ext-language_tools.js",

Of course you need to choos good worker , mode and theme exactly for your needs. In this example I use Vibrant Ink theme and configuration for xml and html documents.

What is also important, default xml snippets are empty, so you should use your own snnippets.

user_29720870

based on this code and this post

if you run

npm i ace-builds

then add to your scripts property in angular.jsonthese lines

...
scripts:[
  "node_modules/ace-builds/src-noconflict/ace.js",
  "node_modules/ace-builds/src-noconflict/ext-language_tools.js"
]
...

then in your angular code:

import * as ace from "ace-builds";
...
this.aceEditor = ace.edit(this.editor.nativeElement);
const options = {
  enableBasicAutocompletion: true,
  enableLiveAutocompletion: true
}
this.aceEditor.setOptions(options);
...

looking at this.aceEditor.$options to see if options were added.

user_17132080
Related