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

Question

I'm new to Angular and trying to set up tables in quill editor. Whenever I try to register the quill-better-table module. I face major issues. Look at my code below.

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

I receive these errors -

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

I am assuming you already have angular project configured. If not, you can use this command to create a new angular project npx @angular/cli@next new editor

1. Use yarn/npm to add quill.js packages to angular project.

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

After installation, your project's package.json should have following dependencies

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

2. Import quill.js snow theme(or any other theme). In file src/styles.scss, add this snippet

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

3. Import and configure Quill Module (File: 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. Add HTML tag. (File: src/app/app.component.html)

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

5. Insert table in editor (File: 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);
  }
}

This is how the output looks like at the end: