我尝试了几种方法使 quill-better-table 工作但没有成功,大多数示例都不适用于 Angular,我收到一条错误消息,提示“无法读取未定义的属性 'insertTable'”我将包括我的代码和错误如下,请帮助我。注意:这适用于生产中使用的应用程序。
这是我的 HTML 代码:
<div class="card">
<div ibmGrid>
<div ibmRow>
<div ibmCol>
<button ibmButton="secondary" size="sm" (click)="onInsertTable()">Add table</button>
<form [formGroup]="editorForm" (ngSubmit)="onSubmit()">
<div class="form-group">
<quill-editor [styles]="editorStyle" [modules]="config" formControlName="editor" (onEditorCreated)="editorCreated($event)"></quill-editor>
</div>
<button ibmButton="primary">Save changes</button>
</form>
</div>
</div>
</div>
这是我的 Angular TS 代码:
import { Component, OnInit, AfterViewInit, ChangeDetectionStrategy } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';
import { DropdownModule, ModalService } from 'carbon-components-angular';
import * as quillBetterTable from 'quill-better-table';
interface Quill {
getModule(moduleName: string);
}
interface BetterTableModule {
insertTable(rows: number, columns: number): void;
}
// declare const require: any;
// let Quill: any = null;
@Component({
selector: 'app-fnl-report',
templateUrl: './fnl-report.component.html',
styleUrls: ['./fnl-report.component.scss'],
// changeDetection: ChangeDetectionStrategy.OnPush
})
export class FnlReportComponent implements OnInit {
editorForm: FormGroup
public quill: Quill;
editorStyle = {
height: '500px',
backgroundColor: '#fff'
}
config = {
toolbar: [
['bold', 'italic', 'underline', 'strike'], // toggled buttons
['blockquote', 'code-block'],
[{ 'header': 1 }, { 'header': 2 }], // custom button values
[{ 'list': 'ordered'}, { 'list': 'bullet' }],
[{ 'script': 'sub'}, { 'script': 'super' }], // superscript/subscript
[{ 'indent': '-1'}, { 'indent': '+1' }], // outdent/indent
// [{ 'direction': 'rtl' }], // text direction
[{ 'size': ['small', false, 'large', 'huge'] }], // custom dropdown
[{ 'header': [1, 2, 3, 4, 5, 6, false] }],
[{ 'color': [] }, { 'background': [] }], // dropdown with defaults from theme
[{ 'font': [] }],
[{ 'align': [] }],
['clean'], // remove formatting button
['link'] // link and image, video ['link', 'image', 'video']
]
}
constructor() { }
ngOnInit() {
this.editorForm = new FormGroup({
'editor': new FormControl(null)
});
}
public editorCreated(event: Quill): void {
this.quill = event;
// Example on how to add new table to editor
this.addNewtable();
}
private get tableModule(): BetterTableModule {
return this.quill.getModule("better-table");
}
private addNewtable(): void {
this.tableModule.insertTable(3, 3);
console.log('Hi');
}
onSubmit() {
console.log(this.editorForm.get('editor').value);
}
onInsertTable() {
// const tableModule = this.quill.getModule('better-table');
// tableModule.insertTable(3, 3);
}
}
这是我的模块文件:
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { LoadingModule, DropdownModule, GridModule, FileUploaderModule, DialogModule, ButtonModule } from 'carbon-components-angular';
import { Help16Module } from '@carbon/icons-angular/lib/help/16';
import { UploadFilesComponent } from './upload-files/upload-files.component';
import { FnlReportComponent } from './fnl-report/fnl-report.component';
import { ReactiveFormsModule } from '@angular/forms';
import { QuillModule, QuillConfig } from "ngx-quill";
import * as Quill from "quill";
import QuillBetterTable from "quill-better-table";
Quill.register(
{
"modules/better-table": QuillBetterTable
},
true
);
const quillConfig: QuillConfig = {
modules: {
table: false, // disable table module
"better-table": {
operationMenu: {
items: {
unmergeCells: {
text: "Another unmerge cells name"
}
},
color: {
colors: ["#fff", "red", "rgb(0, 0, 0)"], // colors in operationMenu
text: "Background Colors" // subtitle
}
}
},
keyboard: {
bindings: QuillBetterTable.keyboardBindings
}
}
};
@NgModule({
declarations: [
UploadFilesComponent,
FnlReportComponent
],
imports: [
CommonModule,
LoadingModule,
DropdownModule,
GridModule,
ButtonModule,
FileUploaderModule,
Help16Module,
DialogModule,
ReactiveFormsModule,
QuillModule.forRoot(quillConfig)
],
providers:[],
exports: []
})
export class ImsHubModule { }
这是我为 quill 导入的 CSS:
@import '~quill/dist/quill.core.css';
@import '~quill/dist/quill.bubble.css';
@import '~quill/dist/quill.snow.css';
这是我对 quill 和 quill 表的 package.json 依赖项:
"dependencies": {
"ngx-quill": "^13.0.1",
"quill": "^1.3.7",
"quill-better-table": "^1.2.10"
}
这是我得到的错误:
FnlReportComponent.html:24 ERROR TypeError: Cannot read property 'insertTable' of undefined