Как мне исправить эту ошибку, которую я получаю всякий раз, когда пытаюсь зарегистрировать quill-better-table с помощью моего компонента редактора quill в Angular 8?

Question

Я новичок в Angular и пытаюсь настроить таблицы в редакторе quill. Каждый раз, когда я пытаюсь зарегистрировать модуль 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

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. Импортируйте и настройте модуль 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 {}

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

Вот как выглядит результат в конце: