CODEWITHSUNDEEP
angularace-editor
Vicky
Vicky

Reputation: 1

How to use more than one ace editor in a single component in ng2-ace-editor

How can we use the more than one ace editor in angular with in a single component.

I would like to use more than one editor in a single component, like similar below.

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

We need to use more than one editor instance. How can we do that?

we are Loading Custom string into editor for autocomplete like below. I want to use two different custom strings for two different editor.

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

Upvotes: 0

Views: 689

Answers (1)

Vaibhav Kaushik
Vaibhav Kaushik

Reputation: 82

You need to make the following changes and it should work

Change the #editor to any other term like #editor1 and it should work.

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

You can also check the stackblitz example on the link below :

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

Upvotes: 1

Related Questions