Ace 编辑器自动补全为 Angular 2？

Question

我正在使用 ace editor 并尝试在编辑器中实现自动完成。我尝试了选项，但它不起作用，我得到 warnings.Any 想法？

Ace 编辑器组件

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);
    }
}

王牌编辑器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>

问题：

自动完成功能不工作。

控制台中的警告消息

Answer 1

试试这个 app.module.ts

imports: [
    ...,
    AceEditorModule // import AceEditorModule
  ]

app.component.ts

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

import 'brace';
import 'brace/ext/language_tools';
import 'ace-builds/src-min-noconflict/snippets/html';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  text = '';
  @ViewChild('editor') editor;
  options: any = {
    enableBasicAutocompletion: true,
    enableSnippets: true,
    enableLiveAutocompletion: true,
  };

  ngOnInit() {
   // disable Automatically scrolling cursor into view after selection change warning
    this.editor.getEditor().$blockScrolling = Infinity;
  }
}
app.component.html

<ace-editor
  theme="monokai"
  mode="html"
  [options]="options"
  #editor
  style=" min-height: 600px; width:100%;overflow: auto;"
>
</ace-editor>
.angular-cli.json

"scripts": [],

更多discusstion

Answer 2

如果您正在使用 Angular 7.X 使用 Ace Editor 最重要的部分是在 angular.json 文件中导入脚本。

"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" }
            ]

如果你不想自动完成选项，你可以省略这两行：

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

当然，您需要根据自己的需要选择好的 worker 、 mode 和 theme 。在这个例子中，我为 xml 和 html 文档使用 Vibrant Ink 主题和配置。

同样重要的是，默认 xml 片段是空的，因此您应该使用自己的片段。

Answer 3

基于this code and this post

如果你运行

npm i ace-builds

然后在 angular.json 这些行

中添加到您的 scripts 属性

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

然后在您的 angular 代码中：

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

正在查看 this.aceEditor.$options 以了解是否添加了选项。

Ace 编辑器自动补全为 Angular 2？

Ace editor auto completion into Angular 2?

ace-editor

angular