每当我尝试在 Angular 8 中使用我的 quill 编辑器组件注册 quill-better-table 时，我该如何解决这个错误？

Question

我是 Angular 的新手，正在尝试在 quill 编辑器中设置 table。每当我尝试注册 quill-better-table 模块时。我面临重大问题。看看我下面的代码。

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

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

使用 yarn/npm 将 quill.js 包添加到 angular 项目。

> 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",
   }

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

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

导入并配置 Quill 模块 (文件: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 {}

添加 HTML 标签。 (文件:src/app/app.component.html)

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

在编辑器中插入table (文件: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);
  }
}

最后的输出是这样的：

每当我尝试在 Angular 8 中使用我的 quill 编辑器组件注册 quill-better-table 时，我该如何解决这个错误？

How do I fix this error I get whenever I try to register quill-better-table with my quill editor component in Angular 8?

angular

quill

ngx-quill