Question

我想使用一个自定义函数来覆盖Quill的图像按钮行为，该函数可以打开角度材料模态。

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

组件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');
        });
    }
}

当我单击图像按钮时，出现下一条错误消息：

错误TypeError：无法读取未定义的属性“ open”

似乎在我将函数提供给处理程序时，它无法访问WriteComponent类中的对话框变量。

有什么想法吗？

Answer 1

我猜你的'this'是错误的，请通过bind（this）更改上下文

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

Quilljs图像处理程序无法在Angular材质中打开模态

1 个答案: