如何在ng2- ace -editor中的单个组件中使用多个ace编辑器

Question

如何在单个组件中使用angular中的多个ace编辑器。

我想在一个组件中使用多个编辑器，如下所示。

<div #editor ace-editor [(text)]="text" [mode]="'groovy'" [options]="options" [readOnly]="false" [theme]="'eclipse'" [autoUpdateContent]="true" [durationBeforeCallback]="1000" (textChanged)="onChange($event)" style="min-height: 300px; width:100%; overflow: auto;"> </div>

<div #editor ace-editor [(text)]="text" [mode]="'groovy'" [options]="options" [readOnly]="false" [theme]="'eclipse'" [autoUpdateContent]="true" [durationBeforeCallback]="1000" (textChanged)="onChange($event)" style="min-height: 300px; width:100%; overflow: auto;"> </div>

我们需要使用多个编辑器实例。我们如何做到这一点？

我们正在加载自定义字符串到编辑器自动完成，如下所示。我想为两个不同的编辑器使用两个不同的自定义字符串。

var langTools = ace.require("ace/ext/language_tools");
 var stepLineCompleter = {

 getCompletions: function (editor, session, pos, prefix, callback) {
 var completions = [];
 x.forEach(function (w) {
 completions.push({
 value: w,
 meta: y,
 name: y
 });
 });

 callback(null, completions);
 }
 }
 langTools.addCompleter(stepLineCompleter);

Answer 1

您需要进行以下更改，它应该可以正常工作

将#editor更改为任何其他术语，如#editor1，它应该可以工作。

<div #editor ace-editor [(text)]="text" [mode]="'groovy'" [options]="options" [readOnly]="false" [theme]="'eclipse'" [autoUpdateContent]="true" [durationBeforeCallback]="1000" (textChanged)="onChange($event)" style="min-height: 300px; width:100%; overflow: auto;"> </div>

<div #editor1 ace-editor [(text)]="text" [mode]="'groovy'" [options]="options" [readOnly]="false" [theme]="'eclipse'" [autoUpdateContent]="true" [durationBeforeCallback]="1000" (textChanged)="onChange($event)" style="min-height: 300px; width:100%; overflow: auto;"> </div>

您也可以在下面的链接中查看stackblitz示例：

https://stackblitz.com/edit/ace-code-editor?file=src%2Fapp%2Fapp.component.html