Angular PrimeNG Editor Get Multiple Instances

Hi I'm using prime ng editor with angular and got multiple primeNg editors

x.component.html


<p-editor [modules]="quillConfiguration" formControlName="questionName" id="questionContents" [style]="{'height':'90px'}" (onTextChange)="onTextChange($event,'questionName')"></p-editor>

<p-editor [modules]="quillConfiguration" formControlName="questionDesc" id="questionDesccontents" [style]="{'height':'90px'}" (onTextChange)="onTextChange($event,'questionDesc')" ></p-editor>

<p-editor [modules]="quillConfiguration" formControlName="guidelines" id="guidelinesContents" [style]="{'height':'90px'}" (onTextChange)="onTextChange($event,'guidelines')"></p-editor>

<p-editor [modules]="quillConfiguration" formControlName="{{item.attributeName}}" id="contents{{item.attributeName}}" [style]="{'height':'90px'}" (onTextChange)="onTextChange($event,item.attributeName)"></p-editor>


x.component.ts


import * as Quill from 'quill'
import { Editor } from "primeng/editor";

@ViewChildren(Editor) editorCmp : QueryList<Editor>;
public quillConfiguration = {
toolbar: {
container: [...],
handlers: {
'customStyles': (value) => {
const selectionRange = this.quill.getSelection(); //throwing error cannot read properties of undefined(reading getSelection)
}
}
}
};
private quill: undefined | Quill;



Using @ViewChildren() I'm accessing editor and calling getQuill method on it

x.component.ts

ngAfterViewInit(): void {
this.editorCmp.changes.subscribe(editor => {
editor.toArray().forEach((edit, idx) => {
this.quill = edit.quill
})
})
}


I'm not sure is this the correct way to get editor instance, only the last p-editor gets the instance, not sure how we can get for all?

Continue reading...