Quilljs image handler fail at opening modal in Angular material

Question

I want to override Quill's image button behavior using a custom function that opens an angular material modal.

Component html

<form>
    <mat-form-field appearance="outline">
        <input matInput placeholder="Titulo" type="text">
    </mat-form-field>

    <div class="editor-wrapper">
        <quill-editor required="true" id="editor" (onEditorCreated)="getEditorInstance($event)">
            <div quill-editor-toolbar>
                    <span class="ql-formats">
                            <select class="ql-size"></select>
                      <select class="ql-font"></select>
                    </span>
                    <span class="ql-formats">
                      <button class="ql-bold"></button>
                      <button class="ql-italic"></button>
                      <button class="ql-underline"></button>
                    </span>
                <span class="ql-formats">
                  <select class="ql-color"></select>
                  <select class="ql-background"></select>
                </span>
                <span class="ql-formats">
                  <button class="ql-list" value="ordered"></button>
                  <button class="ql-list" value="bullet"></button>
                  <select class="ql-align"></select>
                </span>
                <span class="ql-formats">
                  <button class="ql-link"></button>
                  <button class="ql-image"></button>
                  <button class="ql-video"></button>
                </span>
            </div>
        </quill-editor>
    </div>
</form>

Component ts


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

import { UploadImageComponent } from './../modals/upload-image/upload-image.component';

@Component({
    selector: 'app-write',
    templateUrl: './write.component.html',
    styleUrls: ['./write.component.scss']
})
export class WriteComponent implements OnInit {

    constructor(private dialog: MatDialog) { }

    ngOnInit() { }

    getEditorInstance(editorInstance: any) {
        const toolbar = editorInstance.getModule('toolbar');
        toolbar.addHandler('image', this.addImage);
    }

    public addImage() {
        this.dialog.open(UploadImageComponent).afterClosed().subscribe(result => {
            console.log('Closed');
        });
    }
}

When i click on the image button the next error message appears:

ERROR TypeError: Cannot read property 'open' of undefined

Seems that as i give the function to the handler it can't access to the dialog variable in the WriteComponent class.

Any ideas?

In case that anybody is having this problem, here's the answer: stackoverflow.com/questions/47178210/… — Kiddo

Bernd Bernd · Accepted Answer · 2020-09-08T12:10:01

I guess your 'this' is the wrong one, change the context via bind(this)

toolbar.addHandler('image', this.addImage.bind(this));

Quilljs image handler fail at opening modal in Angular material

1 Answers