当我尝试在Angular 8中使用主轴编辑器组件注册quill-better-table时，如何解决此错误？

Question

我是Angular的新手，正在尝试在主轴编辑器中设置表格。每当我尝试注册羽毛笔更好的表模块时。我面临重大问题。请看下面的代码。

import { Component , ViewChild, OnInit} from '@angular/core';
import QuillBetterTable from 'quill-better-table';
import Quill from 'quill';
import { QuillEditorComponent } from 'ngx-quill';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
  @ViewChild(QuillEditorComponent, { static: true }) editor: QuillEditorComponent
  content = 'Hello World!'
  modules = {};
  ngOnInit(){
    Quill.register({
        'modules/better-table': QuillBetterTable
    });
  }
  constructor()
  {
    this.modules = {
      table: false,  // disable table module
      'better-table': {
        operationMenu: {
          items: {
            unmergeCells: {
              text: 'Another unmerge cells name'
            }
          },
          color: {
            colors: ['green', 'red', 'yellow', 'blue', 'white'],
            text: 'Background Colors:'
          }
        }
      },
      keyboard: {
        bindings: QuillBetterTable.keyboardBindings
      }
    }
  }
}

我收到这些错误-

quill Cannot import modules/table. Are you sure it was registered?
debug @ quill.js:2037

quill.js:2037 quill Cannot load table module. Are you sure you registered it?

Answer 1

我假设您已经配置了角度项目。如果没有，则可以使用此命令来创建新的角度项目npx @angular/cli@next new editor

1. 使用yarn / npm将quill.js程序包添加到角度项目中。

> npm install quill@dev quill-better-table ngx-quill

安装后，您项目的package.json应该具有以下依赖性

  "dependencies": {
    "ngx-quill": "^7.3.9",
    "quill": "^2.0.0-dev.3 ",
    "quill-better-table": "^1.2.4",
   }

2. 导入quill.js雪景主题（或其他任何主题）。在文件src/styles.scss中，添加此代码段

@import "~quill/dist/quill.snow.css";

3. 导入和配置笔管模块（文件：src/app/app.module.ts）

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { QuillConfig, QuillModule } from "ngx-quill";
import * as Quill from "quill";
import QuillBetterTable from "quill-better-table";
import { AppComponent } from "./app.component";

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: [AppComponent],
  imports: [BrowserModule, QuillModule.forRoot(quillConfig)],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

4. 添加HTML标签。（文件：src/app/app.component.html）

<quill-editor (onEditorCreated)="editorCreated($event)"></quill-editor>

5. 在编辑器中插入表（文件：src/app/app.component.ts）

import { ChangeDetectionStrategy, Component } from "@angular/core";

interface Quill {
  getModule(moduleName: string);
}

interface BetterTableModule {
  insertTable(rows: number, columns: number): void;
}

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class AppComponent {
  public quill: Quill;

  private get tableModule(): BetterTableModule {
    return this.quill.getModule("better-table");
  }

  public editorCreated(event: Quill): void {
    this.quill = event;
    // Example on how to add new table to editor
    this.addNewtable();
  }

  private addNewtable(): void {
    this.tableModule.insertTable(3, 3);
  }
}

这是最后的输出：