Ngx-quill: "quill.getSelection is not a function" as well as others

[AlexMougenet]

Hi,

I am trying to add a custom emoji picker to my quill editor. I need to use quill's functions (as getSelection, or insertText to insert emojis at the right place), but the following error pops out :

this.quill.getSelection is not a function

Even though binding (onSelectionChanged)="selectionChanged($event)" in the HTML works as expected.

Here is sample of my code :

In the HTML

<quill-editor
            #quill
            formControlName="content"
            placeholder="{{ 'TOPIC.CREATE.Content' | translate }}"
            [modules]="options"
            (onSelectionChanged)="selectionChanged($event)"
            >
        </quill-editor>

In my Angular component :

@ViewChild('quill') quill;

selectionChanged(event) {
    console.log(event);
    console.log(this.quill);
    this.quill.insertText(0, 'my text at index 0');
  }

With this code, when clicking in the editor for the first time, onSelectionChanged gets triggered, and the following is appearing in my console :

The event is correct, but the quill component doesn't seem to have a getSelection method.

Do you have any idea where the issue is coming from ?

[KillerCodeMonkey]

this.quill ist not the quilljs editor instance - it is the ngx quill-editor instance ;-).

so you need to access it like this.quill.quillEditor to get the real quilljs instance out of the angular component.

But in general there is no need to use ViewChild:

just grab the real editor from the events:
https://github.com/KillerCodeMonkey/ngx-quill#outputs

for onContent-/Selection-/EditorChanged there is an editor key in the event object ;-)
for onEditorCreated only the editor is passed as event data.

Checkout the linked demo repo in the readme. there are examples doing such things ;-)