I would like to customize Quill's image button behavior by implementing a unique function that triggers 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');
});
}
}
Upon clicking the image button, I encounter the following error message:
ERROR TypeError: Cannot read property 'open' of undefined
It seems that when passing the function to the handler, it loses access to the dialog variable in the WriteComponent class.
Any suggestions?